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FreeBSD Programming 
Primer —- Part 1 


In this new series we will look at the tools, processes and methods 
involved in writing software, including developing a Content 
Management System (CMS) which will run under an AMP stack on 


FreeBSD, OpenBSD, Linux, etc. 


What you will learn... 
- How to to configure a development environment and write HTML, 
CSS, PHP and SQL code 


ithin the I.T. environment there are many disci- 
VV plines, and often these skill sets work in isola- 

tion. The sys-admin doesn't always understand 
the challenges faced by the programmer or developer, 
the support engineer doesn't understand the problems 
of the developer, and the project manager doesn't under- 
stand the problems of the technical staff. In this new se- 
ries, we will examine from first principles how to devel- 
op a CMS that will run on any Apache / MySQL / PHP 
stack. This will involve writing HTML, CSS, PHP and 
SQL code. 


Code is Everywhere 

To the uninitiated, writing computer code from scratch 
may seem a challenge. Certainly, some programming 
languages are more complex than others, but the fact 
remains you have already programmed some device 
at some stage without realizing it even if you have not 
been near the command line (for example a VHS re- 
corder, central heating timer etc.). As a result you have 
instructed the device to do something (Record the 
Simpsons at 10:00PM on Friday evenings). Software is 
effectively just a collection of instructions, logic and ac- 
tions like this that allow the computer to interact with 
another computer, an end user or just itself. The skill 
is in writing good code that meets the following guiding 
principles: 
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What you should know... 


¢ BSD and general PC administration skills 


¢ Does “what it says on the tin” 

¢ Is user friendly 

¢ ls secure and reliable under stress 

¢ Is fast and efficient (Don't Repeat Yourself) 
¢ Is easily modified and extended 

¢ Can be easily understood 

¢ Has documentation 


While some of these points are essential to any piece 
of software, some may be more important than oth- 
ers depending on the operating environment and spec- 
ification. For instance, a piece of code that pulls pag- 
es from a website on a daily basis into a a new direc- 
tory in the format day_month_year (like 01 01 2013, 
O02 01 2013 etc.) for later reading by a technician would 
not necessarily require anything other than a log file en- 
try saying “404 Not Found” if no content was available. 
However, if this was a critical program designed for an 
end user, it would be better practice to raise a friendly 
error message e.g. “The page you requested was not 
found. Please try again later or contact the helpdesk on 
123 456789". 

Software writing should be creative and enjoyable, 
and part of the challenge is to have a reasonable idea 
of what you want to achieve beforehand, who your audi- 
ence is, what limitations you must consider, and the en- 
vironment the software will run under. A good functional 
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specification should cover these details, but it is im- 
portant to realize that software is never really finished. 
More functionality may be required, the environment 
may change, or bugs and faults need to be rectified in 
the program. That is why code should be easily modified 
and understood as it is the programmers worst night- 
mare having to maintain a badly written, undocument- 
ed, broken program. Trying to get inside someone else's 
logic especially when under pressure to meet deadlines 
can be very stressful! 


Computers Are Not Very Clever 

The old adage “Garbage In = Garbage Out” is most ap- 
plicable in the area of programming. As CANVC, they can 
only literally interpret any instructions that they receive. 
For instance, you might think you have asked the program 
to print the date, but due to an error in your logic, it might 
return 01-01-1970, NULL, or UNDEF. It might not even re- 
turn anything at all. Sometimes when writing code you will 
be convinced the computer is your enemy. This is where 
defensive programming and debugging come to the fore, 
by re-thinking the obvious (and not so obvious) assump- 
tions such as “All input data is valid”. The defensive pro- 
grammer would respond by saying “All data is important 
and tainted unless proved otherwise”. Expect the unex- 
pected. Sometimes it is best to walk away, take a break 
and return to the problem later. Late night coding sessions 
can be frustrating, especially if the result is not what is ex- 
pected. Trying to debug an issue without a decent IDE (In- 
tegrated Development Environment) is possible, but time 
consuming. 


Choosing the Language 

Not all programming languages are equal, and some are 
less equal than others. Different languages are geared to- 
wards different tasks. 

Shell programming languages (for example Bash, Sh 
etc.) are great for system administration tasks e.g. clear- 
ing out and archiving directories, running commands de- 
pending on the user response etc. However they are not 
fully fledged programming languages as such. 

BASIC and Pascal are great for learning how to code, 
but they have some limitations. While it would be possible 
to write a CMS in either of them, as they are not primarily 
geared towards the web the program would be complex 
and convoluted. 

The same argument applies to C. C is extremely power- 
ful and flexible and PHP, Apache and MySQL are written 
using it. lt would be complete overkill to write the CMS in 
scratch from C as we would effectively have to re-invent 
the wheel. 
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Java would make a great platform for a CMS due in part 
to its extensive library support and security, but as it is 
object orientated rather than procedural, the code and un- 
derlying principles would be more complex. 

Script based languages (for example Ruby, Perl, Py- 
thon, PHP) are geared towards the Internet, and most 
ISP's will support them. As PHP has good support, is very 
portable, the documentation is excellent, and integrates 
well with both Apache (Our web server software) and 
MySQL (our database) it is a strong choice. While the the 
other script languages are just as suitable for our CMS, 
the author has more experience with PHP so that is the 
reason for the choice. 

SQL, HTML and CSS are different types of language. 
While not considered “real” programming languages as 
such (on their own you could not write a software applica- 
tion) they are essential to our CMS. 

SQL (Sequential Query Language) is the de facto stan- 
dard language of databases. While most databases today 
use some form of SQL to extract, view and alter data, the 
“dialect” differs from database to database. We will use 
SQL to fetch our dynamic content from our database. 

HTML (Hyper Text Markup Language) is the language 
of the web page. Each document has separate elements 
e.g. a body, header, images etc. and the HTML stan- 
dard defines what these elements are. HTML pages are 
served by Apache and interpreted by the client browser 
e.g. Firefox. 

CSS (Cascading Style sheets) are used in conjunction 
with HTML to change the style of the raw HTML pages. 
While it would be possible to write a CMS without it, it 
would probably not be very aesthetic. 

JavaScript is a lightweight programming language used 
for dynamic tasks in conjunction with HTML e.g. chang- 
ing content on the fly. It is run seamlessly from the client 
browser. 

Generally, programming languages fall into 2 catego- 
ries, complied and interpreted. For instance C, Basic 
and Pascal are compiled whereas most script languag- 
es are interpreted. The major difference between com- 
piled and interpreted languages is how the program itself 
is accessed and run. In the compiled scenario, the initial 
source code is passed though a compiler which generates 
a stand-alone binary if the source code is valid. The oper- 
ating system then handles the corresponding output. A bi- 
nary compiled for one particular Operating System will not 
run on another — in general the compiler has to match the 
O/S unless some form of emulation and library support 
is available. With interpreted languages each line of the 
source code is passed through the interpreter which han- 
dles the corresponding output. Both language types sup- 
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port additional libraries which extend the core functionality 
of the language (e.g. graph support) and these are used 
as required. See Figure 1 and Figure 2 — Compiled and 
Interpreted languages. 

The bottom line is that you need to choose your lan- 
guage for the task you have in hand. Some all purpose 
languages are great but you need to remember the limita- 
tions. The author often uses PHP for add-hoc scripts, but 
Perl or Bash would be just as effective. Often it is a case 
of what you feel most comfortable with, but at the same 
time you don't want to fall into the trap “When the only tool 
you have is a hammer every problem is a nail’. 


To err is Human 

Writing code is paradoxically both infinitely creative and 
flexible yet structured and pedantic. One missed semico- 
lon, a full stop in the wrong place, even word case can be 
the difference between a working code segment and an 
esoteric error message. Sometimes by fixing one problem 
other problems are introduced, sometimes the real prob- 
lem was never addressed at all. It is important that we are 
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Figure 1.A compiled program 
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Figure 2. An interpreted script 
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able to snapshot and document our changes as well as 
quickly isolate any problems. As part of the series we will 
look at version control and debugging. 


The Draft Specification 

The initial specification of our CMS is per Table 1. Further 
additions may be made over the series to demonstrate 
specific principles. The inspiration for parts of the speci- 
fication came from the excellent CMS, Drupal by Dries 
Buytaert. 


Testing 

It is critical that any application is properly tested before 
release. While automated testing methods are available, 
for the purpose of this series will limit testing to some 
crude load and security testing and ensuring that the pro- 
gram “just works as advertised”. 


The Development Environment 
In a commercial environment, the bare minimum would 
probably consist of a test (development) server, a live 


Table 1. CMS draft specification 
Initial CMS Specification 


Allow an authorised user to create a W3C valid web page 
Database transactions (MySQL InnoDB storage engine) 
Efficient search 

Image and attachment uploads 

Menu module 

Modular and extensible 

Run under a standard AMP stack with little modification 
Support XHTML 1.0 strict 

Taxonomy 

Template and region driven — separate the rendering logic from 
page content 

Visitor statistics 


MySQL API 


Apache 


File Server 


NIC 


Figure 3. Our CMS architecture 
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(production) server, a Version Control Server (VCS), 
possibly a database server (MySQL) and the develop- 
ers workstation with an Integrated Development Environ- 
ment (IDE) for code development, syntax checking and 
debugging. Source code would be pulled from the VCS, 
edited and tested on either the workstation or the devel- 
opment server, committed to VCS and pushed to the pro- 
duction server for access by the users when stable and 
ready for release. This scenario is too complex for our 
series, but while it is possible to develop just from the 
command line, debugging (and certainly testing) will be 
close to impossible outside of a graphical environment. 
As a very bare minimum, you will need a headless Free- 
BSD box (without any GUI) and some sort of workstation 
with Firefox installed, but ideally your BSD development 
box should support Firefox, Netbeans, Apache. PHP, GIT 
and MySQL. Your favorite CLI editor can of course still be 
used for editing. 


In the Next Article 
We will start programming in earnest and start serving our 
first CMS page. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since 
his early teens. A keen advocate of open systems since the mid 
eighties, he has worked in many corporate sectors including fi- 
nance, automotive, airlines, government and media in a _ vari- 
ety of roles from technical support, system administrator, de- 
veloper, systems integrator and IT manager. He has moved on 
from CP/M and nixie tubes but keeps a soldering iron handy just 
in case. 
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The BSD Certification Group Inc. 
(BSDCG) is a non-profit organization 
committed to creating and 
maintaining a global certification 
standard for system administration 
on BSD based operating systems. 


@ WHAT CERTIFICATIONS ARE AVAILABLE? 


BSDA: Entry-level certification suited for candidates 
with a general Unix background and at least six months of 
experience with BSD systems. 


BSDP: Advanced certification for senior system administrators 
with at least three years of experience on BSD systems. 
Successful BSDP candidates are able to demonstrate 

strong to expert skills in BSD Unix system administration. 


@ WHERE CAN I GET CERTIFIED? 


We're pleased to announce that after 7 months of 
negotiations and the work required to make the exam 
available in a computer based format, that the BSDA 
exam is now available at several hundred testing centers 
around the world. Paper based BSDA exams cost $75 USD. 
Computer based BSDA exams cost $150 USD. The price of 
the BSDP exams are yet to be determined. 


Payments are made through our registration website: 
https://register.bsdcertification.org//register/payment 


@ WHERE CAN I GET MORE INFORMATION? 


More information and links to our mailing lists, LinkedIn 
groups, and Facebook group are available at our website: 
http://www.bsdcertification.org 


Registration for upcoming exam events is available at our 
registration website: 
https://register.bsdcertification.org//register/get-a-bsdcq-id 
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Primer — Part 2 


In the second part of our series on programming, we will look at 
configuring our development server, write our first lines of code 
and commit the changes to a version control system. 


What you will learn... 
- How to to configure a development environment and write HTML, 
CSS, PHP and SQL code 


BSD test server available with the AMP (Apache 
/ MySQL/ PHP ) installed. We will also use a ver- 
sion control system (VCS) and a CLI based text editor. | 
am using FreeBSD 9.0 with VI, MC (for file management) 
and GIT running under Virtualbox. 
Start by installing FreeBSD from DVD and con- 
figure networking, user and root accounts, etc. as 
normal. 


B efore we get started, you need to have a Free- 


Key 

¢ Command line instructions 

¢ Alterations to configuration files 
¢ MySQL prompt / SQL 

¢ HTML/ XHTML / PHP code 
Part 1. Installing the Software 


Step 1 
As root, Install mc and git from packages: 


dev# pkg add -r mc git 
Step 2. Upgrade the Ports Tree 


dev# portsnap fetch && portsnap extract 
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What you should know... 


¢ BSD and general PC administration skills 


Step 3. Install Apache 


dev# cd /usr/ports/www/apache22 


dev# make install clean 
Configure rc.conf to start Apache on reboot: 
dev# echo 'apache22 enable="YES"' >> /etc/rc.conf 


Ensure hosts has your machine name set in /etc/hosts 
otherwise Apache will not start. 


oes, localhost dev 
BOT ges Og 


localhost dev 
Start Apache: 
dev# /usr/local/etc/re.d/apache22 start 


Step 4. Install MySQL 


dev# cd /usr/ports/databases/mysgl55-server 


dev# make install clean 
Start MySQL: 


dev# echo 'mysql enable="YES"' >> /etc/rc.conf 
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dev# /usr/local/etc/rc.d/mysgl-server start 
Set the MySQL root password and check MySQL works: 


dev# /usr/local/bin/mysqladmin -u root password 'cms- 
password' 
dev# rehash 


dev# mysql -uroot -pcms-password 
mysql>\q 


Step 5. Install PHP5 and Language Extensions 
Enable and build apache module. See Figure 1. 


dev# cd /usr/ports/lang/php5 


dev# make config 
Install PHP5 and the extensions: 
dev# make install clean 
Enable mysql and mysqli support. See Figure 2. 
dev# cd /usr/ports/lang/php5-extensions/ 
dev# make config 


dev# make install clean 


Edit /usr/local/etc/apache22/httpd.conf to reflect the 
following: 


DirectoryIndex index.html index.xhtml index.php 
And add the following at the end for PHP support: 


AddType application/x-httpd-php .php 
AddType application/x-httpd-php-source .phps 


Copy the php.ini file across: 


Options for php5S 5.4.11 


CLI Build CLI version 
Build CGI version 


FPM Build FPM version 
APZFILTER Use Apache 2.x filter interface (experimental) 
{ ] EMBED Build embedded library 
{ ] DEBUG Enable debug 
{ ] DTRACE Enable DTrace support 
[*] IPVG Enable ipv6é support 
[ ] MAITLHEAD Enable mail header patch 
{[ ] LINKTHR Link thread lib (for threaded extensions) 


<Cancel> 


< > 


Figure 1. Enabling the Apache module 
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dev# cp /usr/local/etc/php.ini-development 


just) bocal/ete/ pip.41 ni 
Restart apache to pick up the new PHP extensions: 
dev# /usr/local/etc/rc.d/apache22 restart 


Now we need to setup a development area in our home 

directory. We will create an account with username dev: 
dev# adduser 

Follow the prompts (the defaults are fine), and give the 
new user a password. We want to edit / develop as dev, 

so move the apache data directory across to /home/dev 

and symlink back. That way, Apache can serve the files 


we create as a non-root user as we can run GIT as a 
normal user: 


dev# mv /usr/local/www/apache22/data/ /home/dev/ 

dev# chown dev:dev datapwd 

dev# In -s /home/dev/data/ /usr/local/www/apache22/data 
dev# cd /home/dev/data 

dev# chown dev:dev index.html 


dev# /usr/local/etc/rc.d/apache22 restart 


If you visit your dev box with a browser (http:/vyouripa- 
dress) you should see the standard Apache “It works!” 
welcome page. 


Part 2. GIT Revision Control and our Test Pages 
As a developer, a version control system is an important 
tool not only to track code changes, but to allow quick re- 
covery from mistakes. Once a file is added and committed 
to the repository, any errors can be quickly rectified by roll- 
ing back to a previous version. 

Login with (or su to) the new DEV user account, change 
to the data directory, and create a new repository then 


Options for phpS-extensions 1.7 


HASH Message Digest Framework 
iconv support 
IMAP support 
Interbase 6 database support (Firebird) 
JavaScript Object Serialization support 
OpenLDAP support 
multibyte string support 
Encryption support 
MS-SQL database support 

SQL database support 
MySQLi database support 
ODEC support 
Openssl support 
pentl support (CLI only) 


<Cancel> 


< x > 


Figure 2. Enabling MySQL support 
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commit index.html to it after setting your details. When 
prompted in the editor, the commit message should be 
“Initial Load”. 


dev# su dev 


dev# cd /home/dev/data/ 


dev# git config --global user.name "dev" 
dev# git config --global user.email dev@dev 
dev# git init 

dev# git add * 

dev# git commit 


PHP Version 5.4.11 


2012 root@obrian.cse.buffalo.edu:/usr/obj/usr/src/sys/GENERIC i386 


Feb 2 2013 00:08:03 


Configure ‘Jconfigure’ '--with-layout=GNL '--localstatedir=/var' "--with-config-file-scan- 

Command dir=/usrlocalfetc/php* '--disable-all’ '--enable-libxml’ '--enable-mysqlind' 
*-with-libxml-dirs/usr/local’ '--with-pcre-regex=/usr/local’ '~with- 
Zlib-dirs/usr '—program-prefiz=" '--with-apxs2=/usr/local/sbinjapus' ‘--with- 
regex=php* *--with-zend-vm=CALL' '--prefix=/usrlocal’ ‘~mandir=a/usr 
Alocal/man’ '—infodir=/usr/localsinfo" "build =(386-portbld-freebsd$.0° 


Apache 2.0 Handle 


Virtual disabled 
Directory 

Configuration =| /usr/local/ete 
File (php.ini) 

Path 


Support 

Loaded fusr/local/ete/php.ini 
Configuration 

File 


Scan this dir for |/usr/local/ete/php 

additional .ini 

files 

Additional .ini = |/usr/local/ete/php/extensions.ini 
files parsed 


HP Extension |20100525 
Extension (220100525 


Zend Extension }API220100525,NTS 


ae oc dev 9.0-RELEASE FreeBSD 9.0-RELEASE #0: Tue Jan 307:15:25 UTC | 
B 


Figure 3. PHP enabled 


Listing 1. The modified Apache index.xhtml 
<html><body><h1>Hello World!</h1></body></html> 


Listing 2. index.xhtml 


<?xml version="1.0" encoding="UTF-8"?> 


DOC IVE Denk PULEIC = eC) DI De iM Os Stiek, /EN 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 


<head> 
<title>My first XHTML page</title> 
</head> 
<body> 
<p>Hello world</p> 
</body> 
a7 tiem 


Listing 3. phpinfo.php 
<Cielays) yolojeulinnce 6) 


This will commit the original index.html to the new GIT 
repository. Edit index.html to reflect Code Listing 1 — 
“Hello World” is always the first statement written in ex- 
perimental code. Check with your browser that the page 
has changed (you may need to press Shift F5 to refresh 
the cache). Now commit it to the repository: 


dev# git commit -am "First line of HTML" 
To view the change log: 

dev# git log 

Now delete index.html. To recover: 


dev# git checkout index.html 


$ git log 
commit 30 
Author: 
Date: 


mn EX Ss a mye pe a 4 
Sat Feb 2 03:12:58 2013 +0000 


~XHTML and PHP 


+1 
J 


commit 80070) 
Author: 


ji ti i a = 
Feb 2 02:08:48 2013 +0000 


load 


Figure 4. Git log 
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Further reading 

¢ GIT VCS - http:/githowto.com 
PHP — http:/php.net 
W3 Schools — http:/www.w3schools.com 
W3C — http://www.w3.org 


To go back to the original Apache file (Where 0007073d 
is the first 8 digits of the file checksum) and overwrite 
your changes permanently: 


dev# git checkout 0007073d 


Now the log will only show the original file. Create two 
files index.xhtml and phpinfo.php with the code from 
code Listing 2 and 3 respectively and add and commit to 
the repository: 


dev# git add * 
dev# git commit -am "XHTML and PHP test page " 


dev# git log 


You should see a log file similar to Figure 4. 

Listing 1 is a standard XHTML page, with the XML and 
document type defined. In the next article, we will look at 
adding CSS and Javascript to this skeleton, but the impor- 
tant point to note here is that all the tags are “balanced” — 
every opening tag (e.g. <p>) has to have a matching clos- 
ing tag. To view this page, visit http://vouripaddress/index. 
xhtml in your browser. 

Listing 2 is a very simple PHP command — phpinfo (); 
displays all the configuration values, modules loaded 
etc. available to the PHP interpreter. You should see a 
page similar to Figure 3 if you visit http://vouripaddress/ 
phpinfo.php. 


In the Next Article 

We will look at code structure, program flow and how to 
embed CSS and Javascript in out pages. We will also 
start using SQL to dynamically generate pages. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 
handy just in case. 
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Primer — Part 3 


In the third part of our series on programming, we will look at code 
structure, program flow and how to embed CSS and Javascript in 
our pages. We will also start using SQL to dynamically generate 


web pages. 


What you will learn... 
- How to to configure a development environment and write HTML, 
CSS, PHP and SQL code 


basic construction of our programming language 
(PHP), the directory and functional structure of our 
CMS and how this all fits together. 

Our CMS will be designed to be as extensible as pos- 
sible, and will follow the design as detailed in Figure 1. 
Pages will be stored in the MySQL database, merged with 
the header, templates, CSS and Javascript and returned 
to the client browser. This will allow us to separate design 
from content efficiently. 


B efore we start coding in earnest, we will look at the 


Part 1. PHP Fundamentals 
Any language — both verbal and programming — compris- 
es of separate elements that fit together in a logical struc- 
ture that communicates meaning to the recipient. For lan- 
guage to be effective, rules are strictly defined, not only to 
preserve efficiency but to prevent misunderstanding. For 
example, a written sentence will comprise of nouns, verbs 
and adjectives — likewise computer code will consist of 
variables, expressions and control structures. The main 
functional difference between a human language such as 
English and a programming language is flexibility and in- 
terpretation — as humans we are adaptable enough to in- 
terpret a missing full stop or misspelled word correctly, 
whereas a computer will fail miserably. 

Here will will look at some of the the basic building 
blocks of PHP. 
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What you should know... 


¢ BSD and general PC administration skills 


The following code examples can be created in the ex- 
amples directory using your favorite editor (in this case | 
am using VI). Login to the webserver using SSH or from 
the console, switch to the DEV account from root and cre- 
ate the files: 


dev# su 
dev# su dev 
dev# cd /home/dev/data/ 


dev# mkdir examples 


Reoord 
1 


reader 


Figure 1. CMS design 
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dev# cd examples 


dev# vi examplel.php 


The example can then be run from: http://vourserveri- 
paddress/examples/example1.php (see Figure 2). 

You do not need to run the examples to develop a work- 
ing CMS, but they are useful to experiment with. Change 
values and experiment. 


PHP tags 

All PHP code requires an opening <?php tag. The closing 
?> tag is only necessary when combining PHP with Javas- 
cript, HTML etc. 


Comments 
ln PHP comments are denoted with //. A block of com- 
ments can also be with a block using /* ... */. 


Expressions 

To quote the PHP website “Expressions are the most im- 

portant building stones of PHP. In PHP, almost anything 

you write is an expression. The simplest yet most accurate 

way to define an expression is “anything that has a value”. 
For instance, if the server has 3 disk drives this could 

be written as: 


<?php 
,disk drives = 3; 


Constants 

A constant is useful where the the value will not change 
across the execution of the script. Unlike variables, con- 
stants are accessible within function calls and throughout 
the script, whereas variables may be local only to that par- 
ticular function. This aids program readability. 


hid 
| 
| 


Figure 2. example!.php running via a browser 
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The circumference of a circle is calculated by multiplying 
the diameter by PI (3.14). As Pl is a constant and will not 
change, we can define PI as a constant. See Listing 1. 


Variables 

A variable holds the result of an expression or statement. 
As the name implies, the value of the variable will change 
over the life of the program. The variable name is defined 
on the left hand side of the = sign and the value of the vari- 
able is defined on the right hand side see Listing 2. 


Data types 

Data types, as the name suggests, define what type of da- 
ta we can hold in a variable or constant. The basic types 
are booleans, integers, floats, strings, and arrays. 


Booleans 

A boolean is used where a dual state is useful. A boolean 
has one of two values, TRUE or FALSE. For instance, 
we can define the constant DEBUG and act accordingly 
depending on how DEBUG evaluated by the “if? control 
structure: see Listing 3. 


Listing 1. example!.php 


<?php 


/* 
* examplel.php 

DADO Msn Sumit 

* Define PI as the constant 3.14 and output the result. 


* 


wy 


define (“PI”, 
echo PI; 


3e 14); 


Listing 2. example2.php 
<Zphip 


* example2.php 
* Variables 
* Define circumference as the variable Scircumference 
with the value 
oe ence OULU Line are Stuer 
x 
*/ 
Scircumference = 12.775; 


echo SCircumterence: 
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Integers 

An integer is a whole number of the set z = {..., -2, 
-1, 0, 1, 2, ..}. As the maximum and minimum value is 
platform independent, we can access this value via the 
constant pHp int max. If PHP encounters a number larger 
than pHPp_ Int max, the number will be converted to a float. 
See Listing 4. 


Floats 

The maximum size of a floating point number, like Inte- 
gers, is platform dependent. However, all sorts of round- 
ing and logic errors can be introduced into code with floats 
as they behave differently from integers so particular care 
should be used. For instance, 1/3 is equal to 0.33333 with 
3 recurring to infinity, but as we have limited space it is im- 
possible to represent this fully. If accuracy is critical, vari- 
ous libraries are available to improve float functionality. 
See Listing 5. 


Strings 
A PHP string can contain up to 2Gb of characters. A string is 
limited to 256 ASCII characters, and does not internally store 
strings in Unicode format unlike some other languages. 

A string can be surrounded either by single or dou- 
ble quotes. If surrounded by double quotes, PHP will 


endeavor to evaluate any variables contained within. A 
single quoted string is called a string literal as the string 
is interpreted literally rather than expanding any vari- 
ables contained within it. Like the Vi versus Emacs dis- 
cussion, the use of single or double quotes is very much 
a question of what you want to achieve. While single 
quotes may be considered quicker than double quotes, 
other coding factors have a greater impact on speed. 
See Listing 6. 


Arrays 

An array is a list with a key and value pair. For instance, 
we can list the major BSD distributions as an array vari- 
able, rather than multiple separate variables. We can then 
perform operations on the list by looping through the key 
/value pairs. 

Arrays are useful where we have to keep records in 
sync. For instance if the records from a database table 
were dumped into an array it would be easy to manage 
using the record ID as key. If separate variables were 
used, it would be difficult to manage and the potential for 
errors would be great. Arrays do not need to have sequen- 
tial keys, indeed PHP supports the mixing of numeric and 
string values as keys within arrays. You can even define 
another array as the value of an array 


Listing 3. example3.php 
Gee Guia crop cus 
<?php eine the maximum integer size ila le Von your 
Oat FOr 
see ie Ka 2 bit system this will be 21474836047 
* example3.php 
Booleans a 
a Deine DEBUG as a. boo Rean sala er iil OUe Ss aL 
Change “UES LOsEALSH GO change Ene Oulu puie message, echo PE INT MAX, 
*x 
: Listing 5. example5.php 
“<< Molals 
define (“DEBUG”, TRUE) ; 
i (DEBUG) | 
echo ‘We are in Debug mode’; x example5.phr 
} else { oe Oat 
echo ‘We are not in Debug mode’; ‘ lculate PI a uSing the more accurate 
} mone iMuillecimmyare 
ois ono srt uinie Ss la poy leo ol. 
Listing 4. example4.php 
<?php 2 
Sie = 22 AG 
* example4.ph echo Spi; 
‘BSD 
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The first array example is the traditional PHP method for 
defining arrays, the second version onwards is available 
in > PHP 5.4. See Listing 7. 


Operators 

Operators are used to compare values (Comparison / Logi- 
cal) or change values (Arithmetic / Assignment / Increment 
/ Decrement / String). Care has to be taken with operator 
precedence, as certain operators will fire first. For example, 
the multiplication operator * takes precedence over the ad- 
dition operator + unless the addition portion of the equation 
is wrapped in brackets: see Listing 8. See Table 1 for the 
full list of of the most common operators. 


Functions 

Functions are small blocks of code that can act as effec- 
tively as a “black box” to the code that is calling it. As func- 
tions can be called repeatedly from anywhere within code 
— and if written properly — will provide a consistent result. 
Functions can act independently of the code that is calling 
them, or can return a result that can be manipulated by the 
main body of the program. An important point to realize is 
that variables defined inside a function are generally out of 
scope of the main body — that is to say $a in the main body 
of a program cannot be accessed by the function unless 
it is either passed as a parameter or accessed via some 
other method (PHP has a rich library of internal functions, if 


Listing 6. example6.php 


<- php 


/* 
* example6o.php 
a Siete deers 


* Demonstration of the PHP string type. 


* Note that the last line is functionally identical to 
the previous 
* line and we are separating each line with a HTML <br />. 


* 


a 


define (“BR”) “<br 757 \> 

Spi" 22° 7° ay 

echo ‘The value of PI is: Spi’ . BR; 
echo, “Ihe valic om Pils.) 9 2 spor 2. BE; 
echo, Mie value om Pi ie: Soi” — BR; 


Listing 7. example7.php 
< pip 


Wes 
* example?/.php 
* Arrays 


* All of these examples are functionally equivalent 
a 

Gennet BR “ij 7/7 je 

// Define the array then print it out using the function 


Spano ae ag G 


// Use BR to separate each line 


garray 1 = array ( 
“0” => “FreeBSD”, 
“1” => “OpenBSD”, 
= Nerecn., 
); 


jene sale a (csieueieely lb) 


echo BR; 


parray 2 = | 
“0” => “FreeBSD”, 
“1” => “OpenBSD”, 
“2” => “NetBSD”, 
]; 


jonaak ales sex Sreveiecly 4) ¢ 


echo BR; 


// Arrays can use mixed key values - they do not have to start at 0 


coleGey Gols (=a eechol | 
Totty) Eiikc. hs ekey 5G i) — ~OpenkoD 
paltaye 317 |) =) NetBSD’; 


jorge el Setidigely 9 S)) 3 


echo BR; 


// Let PHP assign the key values 


sarray 4[] = “FreeBSD”; 
earray 4[] = “OpenBSD”; 
earray 4[] = “NetBSD”; 


Pring n(oarray 4); 


echo BR; 
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you do not recognize a function call in the later CMS sam- 
ple code the script will be using a built in PHP function. The 
same apples to the javascript sample). See Listing 9. 


Control structures 

Control structures, along with Comparison / Logical op- 
erators provide the logic for our program. Example 3 is a 
good example of the if/else control structure. 

These are only a very small subset and the most com- 
mon of the extensive features available with PHP. To see 
the full list, please visit the PHP language guide at hittp:/ 
www. php.net/manual/en/angref. php. 


Table 1. PHP Operators 


Example Name Result 


4+ 
ie) 


a+$b 
a-Sb 
a*Sb 
a/ $b 
a % Sb 


iy | in 
Ww w 
+ II 
II VW 
(oa 


a= ‘Hello’ 


a ‘world’ 


i 


9a == $b 
Sa ——— Sb 
Sa!=$b 


a<>S$b 
Sa !== $b 
a< $b 
a>S$b 
a<=S$b 
a<=S$b 
a and $b 
aor $b 


a xor Sb 


: 


a&& Sb 


d 
r 
r 
t 
d 
a|| $b r 


4+ 


+ + 4S} Ee + 4S} + + + tS 5 Cas 
+ 4S 
‘ve w 
wy 


a++ 


4+ 
. 
1 


Post-decrement 
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Sum of ands 


Sansiecees arithmetic 


TRUE if $a is equal to $b, and they are of the same type 


Multiplication Product of $a and Sb 
TRUE if $a is not equal to $b after type juggling 


TRUE if $a is not equal to $b after type juggling. 


: 


TRUE if Sa is not TRUE 


Part 2. CMS Structure 

See Table 2 — CMS directory structure. Create the di- 
rectories and the 14 files as per the instructions for the 
example code under Part 1 — PHP fundamentals. Before 
we can start coding in earnest, we need to populate our 
MySQL database. 

Create the following files, and create the database, ta- 
ble and our first page stored in the database: see Listings 
10-12. Note that the |lpsum Lorem test should be on one 
line with no carriage returns or line feeds. Your editor may 
wrap this very long line. Create the the database, table 
and page as follows in Listing 13. 


Operator 


TRUE if $a is equal to $b after type juggling Comparison 


TRUE if both $a and $b are TRUE Logical 
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Listing 8. example8.php 


<?php 


ye 
* examples.php 
* Demonstration of operator precedence 


* 


a 


deline(“BRY, “<br 7 >"); 


i + ob * 3s 
(le oy eee 


Sa 
So = 


eae 


echo ‘Sa will evaluate to 16: * . Sa 


“So will evaliiate to 16: “3 Sb 2 BR: 


echo 


Listing 9. example9.php 
<li 


/* 
* example9.php 
* Demonstration of a function call 


* 

x) 
// As BR is a constant, this is available to our function directly 
Ome 


define (“BR”, 


// Spi is not available to our function, we will need to 
access it by 


// other methods 
Si eee 


Selo Cre bine cisiae yakicll el ol eiileiwieie Sys Joveiuihe eigiGilN| 5) 5 


lela: CiaeeihinesiesireS Vyelela cl Clieineesie I > ~ joreibiane ferlicter2 (AL), yet) 


rE DOUeHE evel jonealiae, (ClabiaerlL (| Siclbeniileefeia |) | 


// print circl() will display $pi * $diameter 
// Define $pi as a global variable 


gi¢bal Spi; 


// As BR is a global constant we can access it directly 


// Return our result to the main body of the program 


return Spi * Sdiameter . BR; 


PUNC ETON spliMe cle | Sel aMever, pi) ae 


// print circ2() will display $pi * $diameter 

// As BR is a global constant and Spi has been passed to our 
// function we can access them directly. 

// Return our result to the main body of the program 
return Spi * Sdiameter . BR; 


} 
Listing 10. createdb.sq/ 


create database freebsdcms; 
grant usage on *.* to bsduser@localhost identified by 


‘cmsdbpassword’ ; 


grant all privileges on freebsdcms.* to bsduser@localhost; 


Listing 11. createpagetbl.sql 


CREATE TABLE if not exists pages ( 
id INT NOT NULL AUTO INCREMENT, 
PRIMARY KEY (id), 
title VARCHAR(50) NOT NULL, 
hl VARCHAR(50), 
body TEXT 


ee 


Listing 12. createpage.sql 


USE freebsdcms; 
INSERT INTO pages 
VALUES ( 


\l/ 
Ui 


‘My first page’, 

‘Page header’, 

‘Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris 
interdum auctor tellus sed dignissim. Phasellus non orci massa, 
nec feugiat sem. Vestibulum molestie interdum 
bibendum. Nunc guis elit nulla, sit amet rutrum lorem. 

Quisque 
odio est, sagittis nec accumsan ut, placerat sit 
amet lectus. Curabitur aliquam dignissim felis, a malesuada leo 
fringilla at. Sed ornare aliquet lacus, quis 
imperdiet augue mattis eu. Nulla porta odio ut erat 

SOM siseire athe Vehe 
molestie justo suscipit. Aenean convallis 
pellentesque nisl, vitae posuere mauris facilisis vitae. 


Morbi in 


tellus nisl, vel facilisis diam.’ 


Ve 
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Part 3. The Code 
The following PHP files contain the code for out website. 
Create each file as per Table 2. See Listing 14. 
global.css holds the style information for our site. Ex- 
periment with the font sizes, line spacing etc. to style the 
site to your liking. If you use Firefox, install the Firebug 
plugin to dynamically change the values, but if you want to 
make them pernanet you will need to edit this file. Also try 


F 5 ptr aoe 
+ é a], eh i 


4] PAGE HEADER 


Lone ah Oe Pe, COR OO COL Maas ere eee ORL A Ce. PE Poe) OC ee, A ae WE ee eT) 
Bera. Mare Gael £0 a, GE ere PRT WPeri. Ca Sas i, a et A , ee a, Ce erat Nel, orkid 
frig a2. had Greed Aue! ‘lecuel, Guns pede deg PE de. Pl pee ees uk eet corel oe ee fe dip Ree Corel Galerie fell, Wl Godoere 
ue Ce ie. Met im tee ee, ed Le ee 


Figure 3. Our first page — index.php 


renaming global.css and refreshing your browservs cache 
to see the effect of the styling on the site. See Listing 19. 

The include files build our basic HTML header and foot- 
ers, add the CSS add the CSS via global.css and load 
the Javascript. See Listing 20-22. The javascript files 


Figure 4. The page validates 


Listing 13. Creating the database, table and pages in MySQL 


#dev mysql -u root password ‘cms-password’ < createdb.sql 


#dev mysql -u root password ‘cms-password’ < createpage.sql 


#dev mysql -u root password ‘cms-password’ < createpagetbl.sql 


Table 2. CMS directory structure 


CMS Directory structure 


All directories are under /usr/local/www/apache22/data 
Directory / file Purpose 


examples Example PHP code 


includes 


index.php 


Start page for our CMS 


Javascript support for our website 


Contains the SQL loader scripts for our website. 


javascript 


PHP includes for CMS. Each file contains specific functionality as named 


examplel.php 
example2.php 
example3.php 
example4.php 
example5.php 
example6.php 
example7.php 
example8.php 
example9.php 


cms.inc 
core.inc 
html.inc 
mysql.inc 


index.php 


postload.js 
preload.js 
createdb.sql 


createpage.sql 
createpagetbl.sql 


Holds the CSS stylesheets for the website global.css 


Holds the templates for the website 
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header.inc 
footer.inc 
template.inc 
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Listing 14. index.php PNEONGCadiSs Chale  ScEEings mor Our els 
<?php 2 
‘NOt “Cenores a. deine wrepped = all code suctid, be 

Ps on one line 

* andex, php : 

7 Index page fOr) trees spreMs ay 

* 

oa) // Set our timezone 

(MGS e ee (uiigeceiiles date default timezone set (‘Europe/London’ ); 

// Our global settings - Note need full path // Copyright details 
require once ‘includes/cms.inc’; 

jj Core Tuncklons define (“LICENCE”, ‘licence.txt’); 
GeGUiEe Oncey INCLUDES Cone ime > define (“COPYRIGHT”, ‘Copyright &copy; 2013 Rob Somerville 


{ me@merville.co.uk’); 
Jf Mike NS eal Onis define (“COPYYEAR”, date(‘Y’)); 
GequtrenoOnce INCLUDES -ohuminaime define (“COPYAUTH”, ‘Rob Somerville’); 
define (“COPYEMAIL”, ‘me@merville.co.uk’); 
ij? MysOl, Funcelons 


Lequice jones  INCHUDES = Mmysql=ine // Version 

// Turn full debug functionality on if enabled define (“VERSION”, ‘Version 1.0 not for production use’); 

if (DEBUG) { // Mode - If DEBUG is set to true, show errors and debug 
gi @) 


// Turn on full PHP error reporting 


Shor Keporring (i Alnk)y define (“DEBUG”, TRUE); 

jelse{ // Where to find our files 
// Hide all error messages define (“TEMPLATES”, ‘templates/’); 
SIG OG Solo a em Ne UO) 2 define (“INCLUDES”, ‘includes/’); 


define (“SQL”, ‘sql/’); 


// HTML tags that are orphaned and not defined in out 


// Build page - use first record in database template files 


Sicemie [acl | = 1. detime | BOD <body. ™) ; 
define (“HEAD”, ‘</head>’); 
buildpage (Spage) ; 
// MySQL details 


Listing 15. cms.inc define (“DBSERVER”, ‘localhost’); 
Gejelaye define (“DBUSER”, ‘bsduser’); 

define (“DBPASSWORD”, ‘cmsdbpassword’ ); 
/* define (“CMSDB”, ‘freebsdcms’ ); 
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Listing 16. core.inc 
<?php 
/* 


* core.inc 


A TCOMGalns Ore FUNCU ONS for “Our CMs 
* 
Py, 
function buildpage(Spage) { 
// Builds a standard page 


Sid = Spage[‘id’]; 


// Build the SQL and get the result 


Ssql = “SELECT * FROM pages WHERE id='Sid’ LIMIT 1”; 


ptesuliuy= mMysdlescleeulocal); 
// Output our page header 
outfile (TEMPLATES ‘header .1ne’ }; 

// Creare our body 

Smarkup = ‘'; 

Smarkup .= wraptag(‘title’, Sresult[4]); 
Smarkup .= HEAD; 

Smarkup .= BODY; 

// If we are in debug mode, show an alert 
if (DEBUG) { 


Sdebug = ‘é&para; '‘; 


telse{ 


II 
= 
= 


Sdebug ; 


// Add to markup 


Smarkup .= wraptag(‘hl’,Sdebug . Sresult[3]); 
Smarkup .= wraptag(*‘p’,Sresult[5]); 
Smarkup .= divclass(ahref (COPYRIGHT, LICENCE, 


NCiojeniiedellnye evarel 4) 


Ilvcence details”), licence’); 


j7 Ourour all our markine 


echo Smarkup; 


j// Oubpur cur HIM page Eoover 


outfile (TEMPLATES 


EOC eR rnCcy jee 


function outfile (Sfile) { 


// Outputs template file to browser e.g header, 


footer, license etc. 


Sfh = fopen(Sfile, ‘r’); 


while (!feof(Sfh)) { 
echo fgets ($fh); 


relLose (Seth) = 


Listing 17a. html.inc 
<?php 


/* 


* 


“es giesiil eeaane! 


“Contains core him functions for our “CMS 
* 
wo 
function wraptag (Stag, Stext) { 
// Wraps Stext with compliant tags 
// wraptag(‘p’,sometext) 


// <p>sometext</p> 


ete MMolG ae ese eeO egee Siexty ees 70 1 Tate Cee wee 


huNnehICon divclacs (Sdivcontent,. class, od — 94) | 


// Generates a div tag Stext with compliant tags 


Ppocivelbass (lcOnrenit: 7) (Class } 
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Listing 17b. html.inc 


fi Give Lass — Class coment ci 
jy, ivgelacssGonrent’, elace, 1c. } 


Lain Chass Ikeence Sho he —COnmeomnay aay 


a eet SbCl = ee | 


Sie =) aad Sritclmes eae 
} 
rebirn “<div cllass—" . Scillass ee a Sid wa Se 
Sdivcontent ay ae 


funecELOnN anrer(Stext, suri, Stitile = )) 4 

// Generates an href tag Stext with compliant tags 
jj sanreni Clvek mere’, treebed org) 

// <a href="http://freebsd.org” title="Click 
here”>Click here</a> 

// ahref(‘Click here’,freebsd.org,’Link title’) 

// <a href="http://freebsd.org” title="Link 


fitile Clive ner qa 


Ie CS ale ies —— as 
Stubles—, Stext, 


Sahref =  veehe= DEtEle 
UES Nee 


Stext 


‘aren ‘Sislie Ik 
Yea! : 
return Sahref; 
Listing 18. mysq]l.inc 
<< Olay 
x 
* 


MVC La ine 


* Concaine MVS tunmeh Lens hor sOuu “EMS 


7 


Elaciesloial mysenl Seolecle ls sell) =| 


Sdob = new mysqli(DBSERVER, DBUSER, DBPASSWORD, CMSDB) ; 


iia (Srl > iclonakerelie <sucisare) 2 (0))) | 
die(‘Unable to connect to database [‘ 


Se 


olo= COMM Cine hora. 


ih ilenresmlt. = 
if (DEBUG) { 


Sdb->query ($sql) ) { 


die(‘There was an error running the query [‘ 


Sdb->error . 
ye 
jelse{ 


onl re 


// Pass our results to an array to be returned 


sc = array (); 


=UR: 
5 
II 


Sresult->num rows; 
pob= ab becued snows; 
e.g. J 
update /delete 


Whi Lee hOwe=)2resull—-ferchpassoc |) ) 4 


Set | = eeu [ wel! || 
Sel) = sour ial le 
Srl |) = Srowl title’ |: 
cE Uie= — ow) body |; 


/7 Free the result 


Sresult->free(); 


return Sir? 


jp Nonor Lows returned 


if Novo GLOWS arrecuen 
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Listing 19. global.css 


/* global.css - the site global stylesheet */ 


ia 
background-color: teal; 
float: left; 
color: white; 
[Sclofohuimey2 Ziliex< 


text-transform: uppercase; 


pt 
floats. Nett, 

} 

body { 
line-height: 160%; 
ene ill ae folkay aDiSie tetany 
float: lett; 

} 

intemal 
background: none repeat scroll 0 0 #F9F8F2; 
border: dex solid: 
Colon tical, 
font-family: Verdana; 
nmelictopibm 4 INOes<H 
joetelolieie< Zlliexc: 

} 

.jstime, .licence { 


background: none repeat scroll 0 O #EDEAC6; 
border: lpx solid #DADADA; 

color: slategrey; 

kevsne ks neatelairy 

font-family: Verdana; 

fOnt—olze: x—sma ll 

Maron oOr ECM: IDX, 

Marcgqin=rignt: 0px; 

Man Gun= tops) Ops; 


paddane?, Spx L0px; 


Listing 20. header.inc 


—DOCIY PE limi PUBIC = =) Wee (bib site OMS wisike ta) 
EN Sitio.) /wiwews oo, IR xhtml bib, nimi streiet. did = 
<html xmlns="http://www.w3.org/1999/xhtml” xml:lang="en”> 
<head> 
<meta http-equiv="Content-type” content="text/html; 
charset=’iso- 8859-1'” /> 
<link rel="stylesheet” type="text/css” 
href="/stylesheets/global.css” /> 


<script src="/javascript/preload.js” 


type="text/javascript”></script> 


Listing 21. footer.inc 


<script src="/javascript/postload.js” type="text/ 


javescripts> — coriuot ~~ body </ hemi 


Listing 22. template.inc 


This can be empty, but needs to be created. 


<!-- Template file --> 


Listing 23. preload.js 
/* 
preload.js 


Provides Javascript support 


cy, 
// Call the function displaydate() 


displaydate () 


function displaydate() { 


// Displays the date and time in AM/PM format. 


var currentTime = new Date() 

var hours = currentTime.getHours () 

var minutes = currentTime.getMinutes () 
var month = currentTime.getMonth() + 1 
var day = currentTime.getDate () 


var year = currentTime.getFullYear () 


if (minutes < 10) { 


minutes = “0” + minutes 


Wi 6 
’ 


var ampm 


1c (Varennes) Salli | 


ampm = “PM” 
; else 4 
ampm = “AM” 


documentwrite( <div @llass—\2jeuime, >" 4 day f° / 7 
MOMeie te a. 


Weciou 9) oe eligs =.) 8 a SIibiGes a culoml a Gees ©) 
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Listing 24. postload.js 
/* 
postload.7s 


Just an empty file with comments 


ar, 


Useful links 
W3C Validator (by file upload) — http://validator.w3.org 
PHP documentation — http:/www.php.net/manual/en 
W3 Schools — http:/www.w3schools.com 


are split into 2. Preload.js provides the date and time on 
each page, postload.js is just an empty file which provides 
hooks we will use later on in the series. See Listing 23-24. 


Part 4. Our Simple CMS 

Once you have entered the code as per table 2, point 
your browser at http://vourserveripaddress/index.php. 
You should see a page similar to Figure 3. Turn debug off 
and on in cms.inc, and the paragraph mark should disap- 
pear. If you copy the HTML source from the page (In you 
browser view source, select all, copy and paste into the 
W3C validator) the page should validate. 


So what is our code doing? 

The unformatted text is stored as plain text in our data- 
base table. Index.php forms the first page of our website, 
and loads our settings and functions from the include files. 
The first stage is to load our header from a plain text file, 
which is the HTML at the start of our page. The header file 
in turn loads the CSS and javascript, and returns control 
to index.php. We then query the database, wrap the text 
in the relevant HTML tags and output to our browser. We 
then close the HTML with our footer HTML. In the next 
part of our series we will develop the CMS further, pass- 
ing parameters via our browser to load different pages, 
We will also start using our template file so that we can 
design our site the way we want it with separate blocks 
and regions. 
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In the fourth part of our series on programming, we will 
continue to develop our CMS. Here we will examine how a 
modern CMS dynamically generates and controls content 
and implement a similar model in our PHP code. 


What you will learn... 
« How to configure a development environment and write HTML, 
CSS, PHP, and SQL code 


es were literally handcrafted masterpieces of content. 

Before applications such as Dreamweaver arrived that 
allowed content providers to design attractive pages with 
the ease of a document produced in a word processor, it 
was a matter of writing copious amounts of HTML for each 
page, checking that the links and the HTML were correct, 
and repeating for each page. This model was highly inef- 
ficient, as not only was a lot of the HTML repeated across 
pages, the chances of errors coming in and either caus- 
ing the page to render incorrectly or pointing to the wrong 
address became greater as the site grew. Managing a 
website with 100 pages is possible; a website with 10,000 
pages a nightmare. 

The complex sites we see today on the Internet would 
be impossible without the Content Management System. 
Yet even now, large innovative sites are moving away 
from the CMS model toward frameworks that consider the 
locally provided content to be only a part of the website 
with 3 party content supplying a significant proportion of 
the content. 

While the technology meets the ethos of the web in 
that data can be shared freely, it poses the web designer 
and brand manager with a huge challenge — how can 
we take disparate pieces of content and serve these in 
a “wrapper” that to our website visitors appears as if it 
seamlessly represents our brand values? How can we 
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What you should know... 


¢ BSD and general PC administration skills 


divorce the business process from the presentation? Is 
it possible for a website to develop a unique “personal- 
ity” while at the same time remaining fresh, dynamic and 
easily changeable? 

These hurdles are being overcome with the use of CSS 
(Cascading Style Sheets) and templating technologies. 
While the CSS manages the color, fonts, size, etc. of the 
content, templates allow us to adjust the order and vis- 
ibility of the content. For example, we want to generate 
widely different content (both from a stylized and literal 


Page ID: Content type: Rendering: style: 
- Reoord no 1 ' Page ' Field order Colour 
* News > Visible / hidden - Size 
- FAO - Position 
DE [| 
Page 1 
Li Output 
http://mysite/page/1 
Figure 1. Page generation process 
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content perspective) depending on website section, page 
number and content type. See Figure 1 — Page genera- 
tion process. 


MySQL Interface 

As it is important that we can quickly test our CMS, for 
those that would prefer the “Cut, Paste and Click” ap- 
proach rather than managing long SQL statements via 
the command line, you can use a lightweight web-based 
database manager. The lightest of these (a single PHP 
page) is Adminer. An alternative is SQL buddy, and either 
of these can be quickly installed if desired by download- 
ing the archive and extracting into a folder under the /usr/ 
home/dev/data. The web-based interface can then be ac- 
cessed from: http://myserver/dirname. See Table 1 — Use- 
ful links. 


Adding New Content Types 

At the moment, we only have one content type — a page. 
This is stored in the pages table and holds the following 
content as shown in Table 1. 


Table 1. Page content from MySQL pages table 


id|title [ht [body 


This results in the following output as seen in Figure 2. 
Now let us create a second page in our database: 


Method 1 - Via CLI 


> mysql =“uroot —p’ cms—password’ ; 


mysql> use freebsdcms; 


mysql> INSERT INTO ‘pages’ (‘title’, ‘hl’, ‘“body~) 


-> VALUES ‘HI’, 2"); 


(‘My second page’, 


4] PAGE HEADER 


Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum auctor tellus sed dignissim. Phasellus non orci massa, nec feugiat sem. Vestibulum molestie interdum bibendum. 


Method 2 - Via saved SQL statement 
If you prefer, create a SQL file createpage2.sq/ in the SQL 
directory with the following content: 


USE freebsdcms; 
INSERT INTO ‘pages’ (‘title’, ‘hl’, 


VALUES 


body) 


(‘My second page’, ‘H1’, ‘2'); 


Then execute this at the command line: 

S$ mysgl -uroot -p’cms-password’ < createpage2.sql 

Method 3 - Via Adminer / SQL Buddy 

Alternatively use the SQL command function in Adminer 


to execute the following SQL statement: 


INSERT INTO “pages” 
VALUES 


(tatle”, “Al”, “body ) 


(‘My second page’, “H1’, *27)3 

Houston, We Have a Problem 

We now have two pages in our database, but index.php 
still contains the following code: 


// Build page - use first record in database 


Spage[‘id’] = 1; 
buildpage (Spage) ; 


This hard-wires index.php to only serve a page with an 
ID of 1. Depending on the URL passed to the webserver, 
we want to serve that type of content. For example http:/ 
mysite/pages/1 will serve a page with an ID of 1, where- 
as http://mysite/faqs/1 will serve an FAQ with an ID of 1, 
etc. Visiting http://mysite will return the home page (Page 
1). This leads us to the next problem — where do we 
store the content types? We could include this in a sep- 
arate MySQL table, but this would require an addition- 
al SQL query to be executed every time a page is load- 
ed. As content types will not be changed very often, we 
can create another include file that defines our content 


Nune quis elit nulla, sit arnet rutrum lorem. Quisque odpo est, sagittis nec accumsan ut, placerat sit amet lectus. Curabitur aliquam dignissim felis, a malesuada leo fringilla at. Sed ornare 


aliquet lacus, quis impérdiet augue mattis eu. Nulla porta odio ut erat consectetur at molestie justo suscipit. Aenean convallis pellentesque nisl, vitae posuere mauris facilisis vitae. Morbi 


In tellus nisi, vel facilisis diam. 


Figure 2. Our first page 
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Listing 1. content.inc 


<?php 
x 
* 
*  COnEeNt. inc 
* Defines content types for our CMS 
* 
aa 
// Define the content type. This must match any tables 


defined in our 


yp Seuls 

SCONECHUUyPcole—— page , 
PCONUCHIENEyOCS | y=) tac’; 
SCOMECHUMUyPco |e — Mews | 


// Map each content type to a table. Each content type 
must be matched 


// to a corresponding table 


PCOMECHIENtables | page |= — pages | 
SCCMmcsimMe cellollies|| cele! || = iterepe\/ 
PCOnLcienuagles | News J —— news | 


Listing 2. pages_template.inc 
“Si elais 
i ae 

k 

pages Tempel are nc 


* Template for our page content type 


* 


* For content type foo the corresponding template would be: 


i SOO Lemo@la ce a ihic 


~ To display a meld: 


Srencer( tWeMme || Malan on Mele ca wecimed Bimnab: Is)q, 


* To hide a field omit it from here 


* To change the rendering order, just re-order the fields 


* NOTE: Any content generated by javascript will not be 
managed here 
. A closing ?> tag is mandatory 
x 
ee 
render (Stheme[‘title’]); 
render (Stheme [ ‘debug’ ]) ; 
render (Stheme[‘h1’]); 
render (S$theme[ ‘timestamp’ ]); 


render (Stheme[ ‘body’ ]); 


render (Stheme[ ‘licence’ ]); 


22 


Listing 3. index.php replacement code 

// First we need to parse the URL that was passed to us 
to extract the 

// id and the content type. 

SURI = pon R VER | BEOUMST URI A, 

1f(SURI == ‘/7){ 


// If this is a request to root (/) redirect to page 1 


Srequest = array(‘pages’,1); 


buildpage (Srequest) ; 


telse{ 


// Parse the request, if it is valid get the content 


from our DB 


Srequest = parse request (SURI); 


lag (Vales sonblilli(ugistepeiersie,) | 


buildpage (Srequest) ; 


jelse{ 


echo “Invalid request”; 


Listing 4. core.inc replacement code 


function buildpage(Srequest) { 


7/7 Content detinitions 


equine INGKUDES. COnrenE. Ine 


// Routes our incoming request to the right content 
type and pulls 
// the content from out DB. 


PeONEene type — ~ reduces [0 |; 
Sid = Srequest[1]; 
Seemmerceies ibs > MSMR S 6 See mecie eyjee 5 


template.inc’; 


// Build the SQL and get the result 
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9sql = “SELECT * FROM Scontent type WHERE id=’S$id’ LIMIT 1”; 


Sresult = mysql select ($sql); 


// Check we have some content to display 


le (oresult 0) == Oe 


echo ‘No data’; 


return; 


// Check we have a template file 


ig (ils eee (Greene ence alle) ) 4 


echo ‘No template’; 


return: 


} 


// Don't write any output to browser yet as we want 
EOmOOSE MO IEOCe a. 

// our content using a theme. If enabled use our 
Optams zation 

// callback to remove white space etc. 

Obestart( optimize: callback’ );; 

// Output our page header 

outfile (TEMPLATES . ‘header.inc’); 

ji? Cteace cur body 

echo wraptag(*title’, Sresult[*title’ ]); 

echo HEAD; 


echo BODY; 


// Generate a unique ID based on content type 


// Map the requested content type from our real table name 


SIC = cles Sesheel (Secs ese, Scemnsiae eelelliss) 5 


echo: “<cuy aid="" .6ct.7 >” = 


// If we are in debug mode, show an alert 


if (DEBUG) { 


Stheme[‘debug’] = div(‘&para;’, ‘’, ‘debug’); 


// Dump the title & id out to our theme template 
Stheme| ‘id’ | = Sresult[ ‘id’ |; 
Stheme[‘title’] = Sresult[‘*title’ ]; 
// As we don’t know how many fields we will have in 
Our Veenrenis 
// type after our id, iterate through each in turn and wrap 


i elaisuatlede nalelamecmmein, 


Soffset = Sresult[1] — 1; 
Spos = 0; 


foreach(Sresult as Skey => $value) { 


1E(Spos > Sorrser)4 


Stheme [Skey] = div(Sresult [Skey], Skey.’-’.Sid, Skey); 


SiO rare 


// Add our standard copyright notice 


Stheme[‘licence’] = div(ahref (COPYRIGHT, LICENCE, ‘Copyright and 


lacence détails’) ;'”’ ;” lucence’ ) > 


// Include our template file 


hegquilne once ( temo late alo); 


// Close our content type tag 


ecnoe </div> 


// Output our HTML page footer 
Outi le (TEMPLATES . ‘“footer.anec’ )-; 


/7 Flash teal out and display 


SePrene lush (7; 
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Listing 5. core.inc additional code 


HCMC LO jSerase ie sic (SUIRIL) | 


// Returns the type of content and the ID 
// of the content requested. 

// parse request (/page/1) 

j) sate Page: i) 

// parse request (/rubbish/123456) 

// NULL 


// Content Cetinie1ons 


beguice Once INChUDE Se Comecnte iii: ., 


Vou — INOS 
Sirol = INIMidin 
viele) — 10)e 


// Fetch the parameters from the URL 


Sarray = explode(‘/’,SURI); 


if We don’ © need the first %/" = cdelete Ene first 


empty 


// array item 


fal — at tay Smiitlearray),, 


// Check we have 2 parameters 


Sparamcount = count (Sarray); 


if (Sparamcount == 2) { 


// First test passed - We have 2 parameters 


Svalid ++; 


=U0; 

Q 

Gr 
II 


eoucay (Gl; 
Sid 


earray |i). 


ile (lol cleie/ (Sele, Scemiesime eyes) ) | 


// If content type matches our list second test 


passed 


Svalid ++; 


// Map the requested content type to our real 


table name 


Scucecy 0) > Sie@imesite celolkies||sie1e)|| 5 


sing | (Aisi iagbineiealte) (1S) el) 9) | 


// If ID is a number, third test passed 


Svalid ++; 


if (Svalid == 3) { 


// Valid parameters passed, return content type 


and page ID 


return Sarray; 


jelse{ 


j7 Vest failed = return NULL 


return NULL: 


LUMCELOM ODL Imi Zzc real Iback (>but her) | 


// Replace all spaces and cruft between tags 


df (OP TIMI AEE 


Bi = preg replace( ~~ \st<~' |) -<' 7, Sburter); 
Sb = preg replace(‘*/\r\n|\rl\n/',’',$b); 
pO = preg meplace(!\st!’ 7) * %, Sb); 


return ob? 
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Language: | English " MySOL » localhost » freebsdems » SOL command 
Adminer 3.6.4 SOL command 
SOL command ( ——T art Fad 7s 

Bump Logout INSERT INTO pages [ title , hl , 

WALUES ("My second page’, ‘'H1", ‘2") 

troetysdemss : 
Create new table 
select pages 


File upload: Chao: File | Mic fil chee (< 27MB) 


Exeoute Step on error — Show only errors 


From servers) j~ History 


Figure 3. Using Adminer to execute SQL statement 


Listing 6. mysql.inc replacement code 
CE jellale) 
re 
x 
Finny ee alnie 
Moncatms My SOln Mune CuOms Ores oule. CMe 
* 
aa 
hUMeEroOnemysqy selecu (seq) | 


ihe (Selo ere maleic, exc cine) > (0))) 4) 
die(‘Unable to connect to database [‘ 


pal— 6 ONMec ec ts Oram my || ar, 


if ('!Sresult = $db->query ($sql) ) { 
if (DEBUG) { 
die(‘There was an error running the query 
| *.sdb=>error.’ |? )> 
jelse{ 


elke) 


// Pass our results to an array to be returned 
Sr = array(); 


et [| = Sresult—>num rows; // No of rows returned 


Sdb = new mysqli(DBSERVER, DBUSER, DBPASSWORD, CMSDB) ; 


Se (i) 
Se 
update / delete 


// Append the results to our result count 


tE(>result--num rows != 0) 


pi = ettay Menge (ot obecolle— feucnearray (My SOLE. 


INS SOG) TF 


JO VERS elas Ta SeSe ie 


Sresult->free(); 


J) Close the connection 


Sdb->close(); 


Pe rutene oi 


} 


pab— field scounit,; // No of columns in table 
Sdb->affected rows; // No of rows affected e.g. 
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types. We can then automatically use a custom template 
depending on the content type to post process our spe- 
cific content. 


Find the section marked <Directory 
apache22/data”> and add the following: 


“Wusr/local/www/ 


First of all, we need to make some modifications to # 
Apache so that it serves our index.php page as default. # Redirect on error via our CMS 
Edit the line in /usr/local/etc/apache22 /httpd.conf to t 
match the following: 
ErrorDocument 401 /index.php 
DirectoryIndex index.php ErrorDocument 403 /index.php 
Listing 7. html.inc replacement code 
<< jolaye: petucmy  Cin So oid eClaSs a.) 
/* Sdayvconrenu. </ day > 


* 


zal a ig hl oem sal 


A COME ci sSeOre MEM miniciawOm sano .oule CMs 


* 
x) 
LUNCHEON wraptag (stag,  suext) { 


// Wraps Stext with compliant tags 


// wraptag(‘p’,sometext) 


// <p>sometext</p> 


funetion ahrek(Stext, Suri, Stitle = 7} 


7) Generates anmirer 


// ahref (‘Click here’, freebsd.org) 


// <a href="http://freebsd.org” title="Click 


here’ Click here</a- 


// anref(‘Click here’, freebsd.org,’Link title’) 


// <a href="http://freebsd.org” title="Link 


eieeie Cdnelaune re <<) cr 


tag Stext with compliant tags 


{ 


emu Gn aoa ae et OCeK ie 7 (emo ae yn 
} if ($title == ‘’) { 
fUNetLOn divisdiveontent, Scllass, Sid = “7 ) 4 Stitle = Surl; 
} 
// Generates a div tag Stext with compliant tags 
i) Oi “eonbenc , class’) Saline — 9 <a rer See ede 2 Stitle 
i 7  <Oly selass= "class >conkent</ diy - i We Reka yer 
jap) (Ole MeOn rei Clase 7 bd) 
// <div id="id” class="class”>content</div> return Sahref; 
Lil SGoniceni os wa) } 
i) <dageird= "10" content.) ain 
jj Oda *ocontene’ 77%," ") function render (Stield){ 
// <div>content</div> 
// Renders via template 
de Sanh, he 
echo Sfield; 
Sa Vidar ACS ad ae ates 
} } 
ot (oclass = =.= 74 
Sclass = ‘ class="' POlascuc, 2 
} 
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ErrorDocument 404 /index.php 
ErrorDocument 500 /index.php 


This will force all traffic to be passed to our index.php for 
processing. As root, delete our unwanted files then re- 
start Apache: 


S rm /home/dev/data/index.xhtml 
S rm /home/dev/data/index.html 


S apachectl restart 


When you visit http://mysite or http://mysite/, page 1 
should be displayed. Now for the modifications that will 
facilitate content type routing and theme control. Create 
a file in the includes directory called content.inc with the 
content from Listing 1. 

Create the following template file pages_template.inc in 
the templates directory shown in Listing 2. 

Remove the following section entirely from index.php: 


// Build page - use first record in database 


Spage[‘id’] = 1; 
buildpage (Spage) ; 


Replace with the one shown in Listing 3. Remove entire- 
ly the function call buildpage(Spage) from core.inc. Re- 
place with the code shown in Listing 4. Add the function 
calls from Listing 5 to the end of core.inc. 

Replace html.inc with Listing 7. Append the following to 
cms. inc: 


// Optimize output by removing white space between tags etc. 


define (“OPTIMIZE”, true); 


Useful Links 
¢« SQL buddy - http:/sqlbuddy.com 
¢ Adminer - http://www.adminer.org 


Errata 
In the previous article of this series the following syntax was 
incorrect: 


#dev mysgl -u root password ‘cms-password’ < 
createdb.sgql 
#dev mysgl -u root password ‘cms-password’ < createpagetbl.sql 


#dev mysql -u root password ‘cms-password’ < createpage.sql 
It should have read: 


#dev mysgl -u root -p’cms-password’ < createdb.sql 
#dev mysgl -u root -p’cms-password’ < createpagetbl.sql 


#dev mysql -u root -p’cms-password’ < createpage.sql 


Our apologies. 
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Testing and Adding New Content 
That is a lot of code we have added, but we now have a 
major jump in functionality. We can create any number of 
content types now by creating a new table (e.g. fag, news, 
etc.) The only essential fields we must define are ID and 
TITLE. After these two fields you may define as many or 
as few as you require. You will need to create a match- 
ing template file with the fields you want to display or else 
the content will be unable to render. Once you have add- 
ed new records to your content type (Adminer makes this 
quick and easy), the content can be accessed via your 
browser at: http://mysite/mycontenttype/mypageid. |f you 
attempt to access invalid content, you will be presented 
with a rudimentary error message. 

In the next article in the series, we will look at theming in 
detail and how we can lay out the site using a combination 
of templates and CSS. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid-eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 
handy just in case. 
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FreeBSD Programming 


Primer — Part 5 


In the fifth part of our series on programming, we will look 
at how to apply a style using Cascading Style Sheets (CSS). 


What you will learn... 
- How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


What you should know... 


« BSD and general PC administration skills 


eveloping a popular and effective web presence 

does not just rest on the back office technology 

per se, the website also requires “character” and 
often in corporate environments, strict style guidelines ex- 
ist to ensure cohesive branding across media. Separating 
the design (in respect of “the look”) from the functional 
(what it “does”) remains a challenge for web developers. 
Quite often, the end result is a trade-off, especially when 
considering the number of web-enabled devices that are 
now available, the range of browser versions, font support 
and screen resolutions, etc. The bottom line is this — no 
matter how conscientious the web designer is, there are 
certain circumstances where the design of the website will 
not render as the designer expected. 

The industry standard response to this is twofold. First, 
end users are encouraged to embrace newer browsers, 
thereby eliminating the more obvious compatibility is- 
sues, and secondly, designers look to format the site in 
such a way in that the visual output “degrades grace- 


fully” when approached by less compatible browsers. 
This scenario is further highlighted where Microsoft in- 
troduced compatibility mode in Internet Explorer 8 (avail- 
able as an icon next to the refresh button) as it would not 
support the non-standard techniques used in previous 
versions of the browser. 


Linpekge eygiiak MCPGL = EET © FE = hte ee 


Figure 1. Adding new content via Adminer 


Listing 1. Content added to content field via Adminer 


ules 


</ul> 


In this article we will focus on the basic techniques used to integrate CSS with our CMS, and demonstrate how modern 
developers tools available for the browser can assist in design. You will need access to a PC with Mozilla 


Firefox installed to follow this tutorial. Some useful references can be found at: 


<li><a href="http://www.mozilla.org/en-US” title="Mozilla website”>Mozilla website</a></1li> 
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/firebug” title="Firebug”>Firebug</a></li> 
<li><a href="http://www.w3schools.com/css/default.asp” title="W3 Schools”>W3 Schools</a></1li> 
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In this article, we will focus on the basic techniques 
used to integrate CSS with our CMS, and demonstrate 
how modern developers tools available for the browser 
can assist in design. You will need access to a PC with 
Mozilla Firefox installed to follow this tutorial. 

Let's get started: 

First of all, | have created a new news item (in this case, 
with an ID of 3) via the Adminer interface. | added the fol- 
lowing content to the content field (the title and heading can 
be anything you want) — See (Listing 1) and (Figure 1). 

lf you point your browser at http://vouripaddress/news/3 
you should see a web page similar to (Figure 2). 


Firebug 
When hand-crafting websites (i.e. when not using an util- 


Figure 2. Our new news item 


a ~ Qa)” + 


ible for the browser can assist in design. You 


Figure 3. Firebug icon 


€ Vea =i Bi: he. 


Set Seed kee 


Figure 4. Using Firebug to view HTML code & modify CSS 
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ity such as Dreamweaver), one of the biggest headaches 
for the designer is writing CSS. The cycle goes like this 
— write CSS, refresh and preview in browser, correct mis- 
takes, then repeat. With Firebug, we can view our CSS 
changes in real-time, adding selections and classes, etc. 
as required. The resulting amendments can be copied 
and pasted into our CSS file as required. 

Either visit the Mozilla Firebug website available from 
the link or install Firebug via the Tools / Addons menu 
item and restart your browser. You should see the Firebug 
icon at the top right hand side (Figure 3). Clicking on the 
Firebug icon should bring up the Firebug interface and 
change the color of the icon (Figure 4). 

If you click on the HTML, head or body tags in the left 
hand panel of Firebug, you will see the corresponding 
CSS as defined in our global.css file appear on the right. 
You can then disable or edit the values displayed as ap- 
propriate. Click on the HTML tag on the LHS and disable 
each CSS rule in turn by clicking next to it. To revert your 
changes, press F®5. (Figure 5). 


I ericles we wil fou on fhe bic berbriques eed bo integrate SS with oer CMS, one demomirale how meen develop bp 
PC with Moria Pireton inefaled bo [efioe thin boloria) Some uiefal reference com bes bound af 


Figure 5. H/ML attributes disabled in Firebug 


Figure 6. jstime div highlighted 
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Click on the HTML tab. Expand the body tag by click- 
ing on the + sign, and click on <div id="jstime”>. The div 
will be highlighted and the relevant CSS displayed. The 
corresponding CSS can be edited in situ as desired. See 
(Figure 6). 

Firebug is not just an essential tool for modifying and 
testing CSS, you can also debug and step through Javas- 
cript, edit HTML on the fly, check how quickly the compo- 
nents of your web page download, etc. 

Click on the Script tab and reload the page by press- 
ing F5. The Javascript code from preload.js will be shown 
in the window. Set a breakpoint by clicking to the left of 
line 15 (Var CurrentTime ....) and reload the page again. 
You can then step through the javascript code by pressing 
F11. See (Figure 7). 


Listing 2. news_template.inc 


render (Stheme[ ‘heading’ ]); 


( 
render (Stheme[ ‘title’]); 
( 


render (Stheme[ ‘timestamp’ ]); 


render (Stheme[ ‘content’ ]); 
//cender (Stheme|[ ‘licence’ ]) ; 


//rcender (Stheme[ ‘debug’ ]); 


Figure 7. Debugging Javascript 


body 
font-size 
color:rnavy 


14px 


Selector 
Properties 
Value « 


Figure 8. CSS selectors, properties and values 


BSD 


MAGAZINE 


3) 


CSS selectors, properties and values 

CSS syntax is very straightforward. Every HTML tag is 
referenced via a CSS selector (e.g. HTML — html, BODY 
— body etc.) and in turn, this selector has properties and 
values. Where matters get complicated is the cascading 
nature of CSS; for instance if the HTML is defined as hav- 
ing a font size of 12px (12 pixels), unless this is overrid- 
den somewhere, the body (and our footer areas) will have 
a font size of 12px. Good CSS is a balancing act between 
optimized selectors and overrides. Define your HTML or 
BODY too tightly and your theme will require lots of over- 
rides. Likewise, if you have too loose a definition for your 
HTML or BODY tags, there will be a lot of unnecessary 
code duplication. 

Cross browser compatibility also creates issues, devel- 
opers often use a CSS reset to level the playing field to 
build on with their CSS. 

As with all aspects of programming, there is never a de- 
finitive right answer. In some circumstances, speed will 
be more important than compatibility. In others, maximum 
compatibility will be more important and will require a lot 
more CSS. Complex designs will add to this payload. 


Styling our site 
We now have the following design requirements for our 
news page: 


¢ The debug status symbol should be disabled for this 
page 

¢ It should show the FreeBSD logo 

¢ The content should be on a light background cen- 
tered against a dark background 

¢ The timestamp should be in a small font and should 
be prefaced with “Posted at” 

¢ The heading should be in a large font and appear be- 
fore the title 

e List items should be discs 

¢ All hyperlinks should be highlighted light red and 
change color on hover 

¢ The content should leave a space on the RHS for 
some menu items to be added later 

¢ The time display should be in the footer as well as the 
license conditions 


First of all, download the FreeBSD logo from the Free- 
BSD site. This logo is a transparent PNG, which means 
whatever color background we display on the website 
will shine though the image. Download this into a new di- 
rectory called images under /dev/data. 

We need to make some modifications to our news tem- 
plate and javascript files. Edit news_template.inc to follow 
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Listing 3. header.inc 


<link rel="stylesheet” type="text/css” href=”"/ 


stylesheets/reset.css” /> 


Listing 4. footer_template.inc 
<< Oln 
render (S$theme[ ‘licence’ ]); 


Gee 


Listing 5. cms.inc 


// Definition of our footer template 


deline (EMERG, POOLer (reiplabe, ine), 


Listing 6. core.inc 


// Include our template 


Ee cusses  OMee (ME MriiAAhh > os OOF Rell MieimAs i); 


// OWtpuUr our HIME foorer 


the code in (Listing 2). This will change the order of the 
displayed items and disable the debug symbol. 

Copy all the content from preload.js into postload.js, 
and delete everything apart from the opening comment 
from preload.js. Change the file title in the comments 
section of postload.js to postload.js. This will load the 
javascript clock at the end of the body section. See 
(Figure 9). 

We now need to decide how global our CSS should 
be. Do we want all the links on the site to be light red? 
Should all list items be discs? Should the logo be the 
same on every page? For the sake of consistency, we 
will do this but can override this later via the theme files 
(by adding new divs, classes and id’s) and adding fur- 
ther CSS. 

Let us start off with a blank canvas. Delete the contents 
of global.css and download reset.css from meyerweb. 
com into the styelsheets directory. Add the following line 
immediately before we load global.css (Listing 3). 

This will give us a page that looks like (Figure 10). 


A ie Cae bal Rei le 


by thet errs we wi feces on the beer chee eed to ei ES eh or CE, od Genes ew meer Cowelopere ieee avalabls for the bower ca ae dees, oo 


2 = = = 
ep) ore) eee so PES th tees Fees ele Be! to fodkre thn ete tl eee ef) peer eee ae be fine & 
© Borie arbre 
» Sas Bepoes 
= wo Schoo! 
- bk ft 2) Hoh Sener mesimeriBe co ok 
a i ee ee] # ie 
a body © bil SS ee 
7 ‘ 1 wa | ppeiel bin Gee 1TH 
Po evonk ars Lames mer anknecisnmapsiVewm mjuaryilmrivetmed a yr iar ia canal 
an = 
ee ee ee et ee eo = 
5 lied eh fvigheaieriedelsied ctr” ieees"asvaeis™ evix"etpireeeet™s fain 
oe este 4 pun 
i simp el are ‘ = 
i i 


ee ee nd 
thes arocke ere will focus on Lhe bei techmiqqes ued bo £ ete CSS with ger CMS, and te here ood deerelepeers Lode aie able fice the Dee oar i 
i pte A wes Mecede Firion muetalied tt tolow this 5 ) ioe eed eben can be boune at 
frm 


. ieee cet a oe 
is bed = | a i 
Song ~ ne my. de ee, le Lind a 
eerie reece moe ten: ee ore ah Er oe ioe es se nce roe 
‘ ee ee ih mari, Fi oo 
ican a ne ee nee | | whem, meen, - =i, = = 
eels PSs wee  ehereet> Gee OS 1 Misia tees ees Tearkie, hacia, Bipot cele. eelie. chde i 
aed Pn tenes ere cee” Lees beeen” pelea Lert = he — 
Sie, PS Sa ieientee doce eter im" Leas eeicca Selene ten tei | Urs 
eed Pete bend parete it devin sleet bd eed fate mayan ay 
oH Lr Lb ag Td a mang ty 
or vrvaisa al ~ 
Bi cine 


Figure 10. Site with reset.css applied 
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Figure 12. Front page — Note template needs amendment 
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Create the file footer_template.inc and add the following Create a new global.css with the following content (List- 
content (Listing 4). Add this to cms.inc (Listing 5). ing 7). This should result in the pages as displayed in (Fig- 
Add the footer template to core.inc and add these lines ure 11) and (Figure 12). 
just before // output our HTML footer (Listing 6). 


Table 1. Global CSS 


a:hover The: hover modifies the default a css to fire when the link is hovered over 
‘Htimestampibefore Content added before thetimestamp id 
#heading text-transform: capitalize forces the first letter of each heading word to uppercase 
ti Tiststyle:cicle inside forces a disc to be used with indented listitems 
Listing 7. global.css margin-top: 3px; 
body { } 
background-—collor: fHPE RYE; #heading { 
background-image: url(‘“/images/logo-full.png”) ; background-collor: #31343¢; 
background-repeat: no-repeat; color: #FFFFFF; 
border: lpx solid #000000; PONn=s ize. 5px 
font-family: helvetica; PONE wera: ebold; 
font-size: U4px,; Marqin=borrom: ~l0px: 
Margquni, Z0px auto Uy Macon wep.  L0px; 
paddung=: 0px Ops 3 5px; padding: silo, 
widen: S60px ‘imporcant, Bex Setanis norm: meapiiralal ze: 
} } 
html { POOnrent 4 
background-color: olivedrab; COlOUs Tiga 
} fonk= size: —20px> 
a { line-height: 30px; 
color: #FD5EA9; Pexteaol len: JUStanye 
} } 
a:hover { #licence, .jstime { 
background-color: #FDA8D0; background: none repeat scroll 0 O #FFFFFF; 
Color: #PEEEFE; floats Lert; 
} font-size: alex: 
#news, #page { McHeC i f= OOs suo x. 
border: ipx solid #DADADA; padding=rtohe:= lips; 
Margin pops Lo0px: padding=rop< 5px; 
padding: 20px; } 
Wickes nO 4: rie 
} list-style: circle inside; 
#timestamp:before { } 
CONMeEECE Ost oomcdtan , 
} 
#timestamp { 
Colors FAZAZAZ; 
EOnE-size: L0px; 
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Useful links 

¢ Mozilla firefox — http:/www.mozilla.org/en-US 
Firebug —- https://addons.mozilla.org/en-US/firefox/addon/ 
firebug 
W3 Schools CSS tutorial — http:/www.w3schools.com/css/ 
default.asp 
FreeBSD logo — http:/www.freebsd.org/logo/logo-full.png 
Eric Meyer's CSS reset — http://meyerweb.com/eric/tools/css/ 
reset/reset.css 


What have we accomplished here? 
Apart from moving the javascript clock and licence outside 
of the main content area (which required the addition of 
a template and a small modification to core.inc and cms. 
inc), most of the heavy lifting has been performed by re- 
set.css and global.css. Reset CSS sets the defaults for all 
major browsers etc, and this is reflected by the raw output 
on our non-news pages. We now have a choice, either 
embed our website standards in reset.css or depending 
on our database and template definitions, add some fur- 
ther CSS to global.css. With hindsight, choosing “body” for 
a field name in the pages table was not ideal, as it cannot 
be referenced in CSS without causing havoc. Renaming 
this to “content”, changing the name in pages template. 
inc and commenting out the render ($theme (‘licence’) ) 
will fix the pages content to match the news item. 

As for global.css, most of the selectors and values 
should be self-explanatory. The more subtle attributes are 
listed in (Box 1). 


In the next article 
We will continue with some more advanced CSS, and be- 
gin to build our menu system. 


ROB SOMERVILLE 
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FreeBSD Programming 
Primer - Part 6 


In the sixth part of our series on programming, we will design a 
basic menu navigation system and style it with CSS. 


What you will learn... 
« How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


displaying standard HTML pages which have been 
pulled from our database. We are now going to shift 
directions and start to look at the user interface of the CMS 
itself. Traditionally, menu links were hard coded into pages, 
which not only made long-term maintenance time-consum- 
ing but also error-prone. By leveraging the power of a da- 
tabase back end, we can easily extract the title and section 
of pages we want to display and if desired, include or ex- 
clude that content from the menu. For flexibility, we will also 
include the facility to add disparate links to other sites, etc. 
Many sites now use multi-level menus which are driven 
by a combination of SQL, Javascript / Jquery and CSS. 
Later on in the series, we will look at using Jquery to 
add this functionality, but for now we will concentrate on 
a block navigation menu that is displayed alongside the 
main content. 


S o far in this series, we have focused on adding and 


The SQL 

To demonstrate, let’s spin up a MySQL session and take 
a look at our content. At the shell prompt, login to MySQL 
and run some queries (Listing 1 — 2). 

By using the UNION keyword, we can combine the 
output of both SELECT statements into one result. This 
would be fine if we had a small site with not much content, 
but as the site grows, the menu would become unman- 
ageable in size. We could build the interface with a drop- 
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What you should know... 


¢ BSD and general PC administration skills 


down and filter by section, but we would just be postpon- 
ing the inevitable. An additional improvement would be to 
use a combination of a content type filter and a pager with 
the MySQL LIMIT keyword, restricting the display to a cer- 
tain number of items. This would help in the final design 


Listing 1. Logging in to MySQL 
#dev mysgl -u bsduser -pcmsdbpassword 


Listing 2. Selecting our content 
mysql> use freebsdcms; 
mysql> (SELECT ‘news’ AS contenttype, id, title FROM 

news) UNION (SELECT ‘pages’ AS 

contenttype, id, title FROM pages); 


$------------- $----4}----------------------- + 


contenttype | id | title | 


+------------- +----4}----------------------- + 
news 1 My first page | 
news 2 My second page | 
news 3 Peiaele 5 > Using, Css || 
pages il My first page | 
pages Zi My second page 

+------------- +----4----------------------- + 


5 rows in set (0.00 sec) 
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and theming of the site, as we will know exactly how much 
browser real estate would be occupied by the menu itself 
even if the content expanded rapidly. 

The remaining issues are how to add disparate links 
and whether we want to display the content in the menu 
at all. For example, we might have an error page that only 
is displayed when the content is not found. While it would 
be useful to store this in the database, displaying it in the 
menu would be rather pointless. The question is where to 


store this data? We could have a separate menu table, 
with the ID of each page and a numeric flag (0, 1) to rep- 
resent do not display in the navigation menu or include in 
the menu. We would then have to maintain 2 tables when 
content is added and removed. This could be easily ac- 
complished using MySQL triggers. Alternatively, we could 
store the page status in the relevant content tables (e.g. 
news, pages) with a flag (0,1,2) to represent “do not pub- 
lish”, “publish but do not show in menu’, and “publish and 


Listing 3. Creating FAQ's table and adding status flag 


mysql> CREATE TABLE faqs LIKE news; 
mysql> ALTER TABLE fags ADD status INT DEFAULT 0 AFTER 


COniEen te: 


Listing 4. Adding auto increment to the FAQ table 


nysqi> Allan VABEE tags CHANGE ded Ni Ti) PAu OS uNCREMENT; 


Listing 5. Adding data to the FAQ table 


mysql> INSERT INTO fagqs(id, title, heading, content, 
status, timestamp) VALUES(‘’, 
SEARO (hes FAO’, 


‘Aenean volutpat, ligula vitae 


laoreet dapibus’,2,''); 


Listing 6. Amending the remaining tables 

mysql> ALTER TABLE pages ADD status INT DEFAULT 0 AFTER content; 
mysql> ALTER TABLE news ADD status INT DEFAULT 0 AFTER content; 
mysql> ALTER TABLE pages CHANGE id id INT(11) AUTO INCREMENT; 


mysql> ALTER TABLE news CHANGE id id INT(11) AUTO INCREMENT; 


Listing 7. Our 3 table content 


(SELECI 
FROM news) UNION 


mysql> ‘news’ AS contenttype, id, 


(SELECT 


Stakus; title 


‘pages’ AS 
UNION 


contenttype, id, 
(SELECT ‘fags’ AS 


status, title FROM pages) 


contenttype, id, status, title FROM faqs); 


+------------- +----}+-------- $----------------------- + 
| contenttype | id | status | title 
+------------- +----}+-------- $----------------------- + 
news 1 0 My first page 
news ve, 0 My second page 
news 3 0 Arie les 5 — “Using CSS 
pages ik 0 My first page 
pages Z 0 My second page 
faqs a 2 FAQ 1 
ree Z 0 FAQ 2 
faqs 3 il FAQ 3 
ie oie 4 y FAQ 4 


faqs S) 2 FAQ 5 
faqs 6 2 FAQ 6 
faqs fl 2 FAQ 7 
faqs 8 Z FAQ 8 
faqs 9 Z FAQ 9 
feel eyes 10 Z FAQ 10 
+------------- +----}+-------- $+----------------------- + 


15 rows in set (0.00 sec) 


Listing 8. Updating the news and pages status 


mysql> UPDATE news SET status = 1; 
mysql> UPDATE pages SET status = 2; 
(CSS Cal 
FROM news) UNION 


mysql> ‘news’ AS contenttype, id, status, title 
(SELECT 
‘pages’ AS 


UNION (SELECT ‘fags’ AS 


contenttype, id, status, title FROM pages) 


contenttype, id, status, title FROM faqs); 


+------------- +----}+-------- $----------------------- + 
| contenttype | id | status | title 
+------------- +----}+-------- $----------------------- + 
news 1 il My first page 
news 2 1 My second page | 
news 3 il Fiche ow on aU sdiiGe Goon 
pages 1 Z My first page 
pages Z Z My second page 
ie) Oe iL 2 EAOs Ii 
faqs Z 0 FAQ 2 
faqs 3 i FAQ 3 
faqs 4 Z FAQ 4 
faqs 2) Z FAQ 5 
faqs 6 2 FAQ 6 
ces 7 Z FAQ 7 
faqs 8 Z FAQ 8 
faqs 9 Z FAQ 9 
faqs 10 Z FAQ 10 
+------------- +----4+-------- $----------------------- + 
15 rows in set (0.00 sec) 
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Figure 1. Bug in core.inc 


show in menu”. Both designs have their good and bad 
points from the implementation and data integrity view- 
point, but for the sake of simplicity, | will use the latter for 
our navigation menu. 

In the meantime, we have an FAQ definition in our file 
content.inc but we do not have any table data for it. We will 
now manually create the table and add 10 random FAQ en- 
tries (Listing 3-5). This will result in a new FAQ table with 
our status field. However, the ID field is not set to auto in- 
crement, so we need to change this (Listing 4). Now insert 
the data (10 entries) — replacing the title, heading and sta- 
tus (0, 1 or 2) as appropriate. We need to repeat the struc- 
tural amendments for our news and pages tables as well 
(Listing 6). Let's check what data we now have in the three 
tables (Listing 7). As we can see, the news and pages will 
not be published or displayed in the menu. Change this so 
the news items are not in the menu but published, but the 
pages are (Listing 8). Let us check in a browser if FAQ 
1, 2 and 3 are displayed. Visit http://yourserverip/faq/1 and 
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Figure 2. CSS requires fix for FAQ content type 


you should get an error message “No template”. To rec- 
tify this, create a fags template.inc file IN /usr/home/dev/ 
data/templates with the following content (Listing 9). 

Bug alert! If you visit http://yourserverip/faq/1 you 
will find the page is not rendering correctly (Figure 1). 
You will receive an error message: Notice: undefined 
index: heading in /usr/home/dev/data/templates/faqs _ 
template.inc on line 23. If you want to try and diagnose 
the problem, have a look at core.inc and skip the next 
code listing. The problem lies in the following code snip- 
pet. To fix it, change as follows (Listing 10-11). 

lf you visit http://yourserverip/faq/1, you will find the 
page is still not rendering correctly (Figure 2). The reason 
for this is that the the global CSS doesn’t know about our 
FAQ content type yet, so we need to modify global.css as 
follows (Listing 12). You may have to refresh or clear your 
browser cache to pick this up. This should result in the 


Listing 9. FAQ template 


SE lelnye 
[ee 
* 
 eelois ieumle lle eis) 1iave 


* Template for our fag content type 


* For content type foo the corresponding template would be: 


’ Oo (template same 


~ To Witsplay a eld: 


» seSwiclsic (Siclvsnts || Voewls C12 elle! eis clewhaetel i velo” |): 


* To hide a field omit it from here 

* To change the rendering order, just re-order the fields 
* 

* NOTE: Any content generated by javascript will not 

be managed here 

* A closing ?> tag is mandatory 

x 

/ 
render (Stheme[ ‘heading’ ]); 


render (Stheme[ ‘content’ ]); 


ce 


Listing 10. Bad code! 


it (Spos > Sorrset) { 


Stheme[Skey] = div(Sresult[Skey], Skey.’-’.Sid, Skey); 


Listing 11. Good code 


if (Spos >= Soffset) { 


Stheme[Skey] = div(Sresult[Skey], Skey.’-’.Sid, Skey); 


Listing 12. CSS to include FAQ content type 


#news, #page, #faq { 


Listing 13. Prevent non-published content showing 
$sql = “SELECT * FROM $Scontent type WHERE id=’Sid’ AND 
Status > 0 LIMIT 
1 ues 


BSD 


MAGAZINE 


44 


TBO 01/2014 


FreeBSD Programming Primer - Part 6 


FreeBSD. 


First FAQ 


Aenean volutpat, ligula vitae laoreet dapibus 


& LAIOOLS 21:05PM 


Figure 3. FAQ working 


correctly rendered content in (Figure 3). However, if we 
visit http://yourserverip/faq/2 , we will see an FAQ page 
even though the status is 0. Modify core.inc as follows to 
fix this (Listing 13). This should now give a “No data” mes- 
sage. If you are still experiencing problems, ensure that 
the content.inc file is as follows (Listing 14). 


Building our menu 

How can we remember the filter value selected for the con- 
tent type? As HTTP is stateless, we could pass the param- 
eter to each page. This would get complex very quickly with 
multiple menus. A better solution would be to write a cookie 
to the visitors browser when the content type is filtered. To do 


Useful links 

¢ Jquery library: http://code.jquery.com/jquery-1.10.2.min.js 

¢- Jquery cookie: https://github.com/carhartl/jquery-cookie/ 
blob/master/jquery.cookie.js 


libraries. Download jquery-1.10.2.min.js and jquery.cookie.js 
from the Jquery website. Place these files in the Javascript 
folder, then modify our source code as follows (Listing 15- 
18). When you visit http://youripaddress/faq/1, you should 
see a page similar to Figure 4. Clicking on the FAQ, News or 
Page button will raise a Javascript dialogue box. 


In the next part 

We will tie the onclick event to writing a local cookie, and 
extracting the links for the MySQL table. We will also look 
at using the Jquery library to build a multi-part menu. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid-eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 


this we will use Javascript, and specifically a suite of Jquery — handy just in case. 
Listing 14. content.inc 
scomcsime tcaloles | jckee | > jeckcyes 
<?php Se Oicsine: tcelodes || iwele | = ieelops 
/* SCOncS me welevbes || ites || S Mater. = 


* 


aS COMECh ernie 
* Defines content types for our CMS 


* 


a 


// Define the content type. This must match any tables 


defined in our 


77 eCis 

~COMUCMIL EYpecl) =" page. ; 
SCOMeSie Iie ||| = ameter! 
TeCOMUCOIENEYOCo lI) —— Genes 


// Map each content type to a table. Each content type 
must be matched 


// to a corresponding table 


Listing 15. header.inc include Jquery support 


</ DOCTYPE html PUBLIC “=//W3C//DTD XHIME 10 Strict, /EN” 
SHEED 7 (WWW Wo Orgy Thy <html, DTD, <iimil=steictadtd = 
<html xmlns="http://www.w3.org/1999/xhtml” xml:lang="en”> 
<head> 

<meta http-equiv="Content-type” content="text/html; 
Charseu— seo ooo 477 

<link rel="stylesheet” type="text/css” 
href="/stylesheets/reset.css” /> 

<link rel="stylesheet” type="text/css” 
href="/stylesheets/global.css” /> 

<SCript src—"/ javascript, jquery—-. 10.2 min. 76” 
type="text/javascript”></script> 


<script src="/javascript/jquery.cookie.js” 


type="text/javascript”></script> 
<script src=”"/javascript/preload.js” type="text/javascript”> 


<<) BiCve iON 
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Listing 16. core.inc 


FUNC ELON Cpe AC ncallbackw(eoumter) 4 


// veplace all spaces between tags 


aig 


} 


(OPTIMIZE) { 
pO = preg replace(‘~>\st<~', ‘><’, Sbutter); 
ebo= preg _replace( (7 Vein Ven, “9 eb)- 
eb °= preg teplace(*!\st!”, ~~) Sb); 
return $b; 

else { 


7) SBUGE NX Bieiiclon 16 


rekUrn SbUurEer. 


Listing 17. index.php — add include menu. inc 


/7 Menu rune rons 


Gequine once INCEUDES.” Meni. 1ie «; 


Listing 18. menu.inc 


<?php 


function menu(Stype) { 


require INCLUDES 


if ($typ 


Voontent mc = 


== ‘navigation’) { 


// Build select statement for each content type 


Teta te Leal 


// Omit the UNION keyword on the last item 


Sottser = 1; 
Mice lgSeCie ies = Collie (Se@mecine, cele leis) 2 
Sisql = 


\7 


Ssoption = ; 


Peugieclela (Sveleihesme eclolbes cs Silos) | 


// Build the option for the content type 


Soption .= ‘<button onclick="window.alert(\’’. 


Scontenttype.’\’)”>' .Scontenttype.’</button> énbsp;'; 


Soffset ++; 


Smenu = ‘'; 

Sento e=)  <divoclacs: — menu” Stype elas 
Smenu .= ‘<h2>’ Stype lass 

Sime |= “orWidleciaaee jee! = 

Smenu .= Soption; 

Smenu .= ‘</div>’; 


reruem omen: 


Listing 19. Menu CSS add to global.css 


.menu-navigation { 


border: lpx solid #DADADA; 


paddaintce: B0iox: 
uohelge 25 bke2 


background-color: #E5E6AD; 


i 
Oma eos 


600; 


Coles 


font-weight: 
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Figure 4. FAQ with Javascript onclick buttons 
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FreeBSD Programming 
Primer — Part 7 


In the seventh part of our series on programming, we will continue 
with the menu navigation system and using Javascript. 


What you will learn... 
« How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


represent the three content types that we have de- 


S o far, we have built navigation section buttons that 
fined in content.inc: pages, news and FAQ’s. When 


FreeBsD, 


First FAQ 
Aenean volutpat, ligula vitae laoreet dapibus 


Sars 
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Figure 1. FAQ with Javascript onclick buttons 
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What you should know... 


¢ BSD and general PC administration skills 


the button is pressed, a Javascript popup alerts the user 
as to what button was clicked via the onclick event (Figure 
1). We now need to add additional functionality — when the 
page is loaded, by default the page's links should be dis- 
played, the menu option (or filter) needs to be displayed to 
the user, and when the button is clicked, the menu content 
needs to be rebuilt (Figure 2). Later we will build a more so- 
phisticated menu using the Jquery library. 


Has user chosen 
a menu filter? 


Figure 2. Logic for the navigation menu 
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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" “http: //www.w3.org/TR/xhtml1/DTD/xhtmll-strict.dtd": 
<html xmlns="http: //www.w3.org/1999/xhtml" xml: Lang="en"> 

<head> 

<meta http-equiv="Content-type" content="text/html; charset='iso-8859-1'" /> 

<link rel="stylesheet" type="text/css" href="/stylesheets/reset.css" /> 

<link rel="stylesheet" type="text/css" href="/stylesheets/global.css" /> 

<script src="/javascript/jquery-1.10.2.min.js" type="text/javascript"></script> 

<script sre="/javascript/jquery.cookie,js" type="text/javascript"></script> 

<script src="/javascript/preload.js" type="text/javascript"> 

</script> 

<title>My first page</title></head><body><div id="page">My first page<div id="debug">&para;</div><div id="h1l 
interdum auctor tellus sed dignissim. Phasellus non orci massa, nec feugiat sem. Vestibulum molestie interdu 
bibendum. Nunc quis elit nulla, sit amet rutrum lorem. Quisque odio est, sagittis nec accumsan ut, placerat : 
amet lectus. Curabitur aliquam dignissim felis, a malesuada leo fringilla at. Sed ornare aliquet lacus, quis 
imperdiet augue mattis eu. Nulla porta odio ut erat consectetur at molestie justo suscipit. Aenean convallis 
pellentesque nisl, vitae posuere mauris facilisis vitae. Morbi in tellus nisl, vel facilisis diam.</div></di' 


Figure 3. Page source showing Javascript Jquery libraries loaded 


Listing 1. postload.js 


// Set navigation menu cookie Smenuvalue = ‘pages’; 
function setnavitem(item) { } 
S.cookie(“navmenuitem”, item); 


foreach (Scontent tables as Scontenttype) { 


} // Build the option for the content type 


Listing 2. menu.inc 


< pip 


function menu(Stype) { 


SOption s—= “<button onclick—"setnavitem(\!) ”. 


Scontenttyoe.’ \"); 


document. location. reload(true)\s "> softcet.”. 


Vouctmer (scontent lype). </bucton- cnbsp,” 


Soffset ++; 
require INCLUDES . ‘content.inc’; 
} 
if (Stype == ‘navigation’) { 
Smenu = ‘'; 
// Build select statement for each content type 
ene teulien Smenu .= ‘<div class ="menu-’ . Stype . ‘>’; 
// Omit the UNION keyword on the last item SMe = <i? Suet rSt (ot yoe) al s. 
Smenuvalue.’)</h2>'; 
Soffset = 1; Smenu .= ‘<p>&nbsp;</p>’; 


pCauedol@es) — COUNT (. Convent tables), Smenu .= Soption; 
Ssql = \'; Smenu .= ‘</div>’; 
Soption = ‘'; 

return Smenu; 


// Get the value of the cookie if set 


He (tsset(s COOKIE “iavymenuivem? |) 


emenuvalue = $ COOKIE| ‘navmenuitem’ |; 


}else { 
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Step 1 - Handling the user interaction 
Ensure you have downloaded the Jquery libraries as de- 
tailed in the previous article. If you view the page source 


First FAQ 


Aenean volutpat, ligula vitae laoreet dapibus 


Navigation (news) 
1.Pages | 2.Faqs | | 3.News | 
Copyngh! ©2013 fob Someniie meiimeniie cok 27/7013 177M 


Figure 4. FAQ page with Javascript and cookie control 
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First FAQ 
Aenean volutpal, ligula vitae laoreet dapibus 
Mavigation (pages) 


1.Pages  2.Fags || 3.News 


s Prva ree 


ey < OY cease: HTML C85 iariet DOM Met Cookies * 
7 Cookies Filter Default (Accept cookies) = 
[ Ar 197 beh obs is 86ffon 


Figure 5. Cookie set in Firebug 


<!DOCTYPE html PUBLIC 


<head> 


".//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns="http://www.w3.org/1999/xhtml" xml: Lang="en"> 


for any page, it should be similar to (Figure 3). Modify post- 
load.js and menu.inc as follows (Listing 1 — 2). 

lf you now navigate to http://voursiteip/fagq/1, you should 
now see a page similar to (Figure 4). If you click on the 
buttons, instead of a Javascript popup you should see 
the navigation menu title changing to reflect the new se- 
lection. Using Firebug and the Cookie console, you will 
see the content of the cookie changing when a new menu 
item is selected. Deleting the cookie and refreshing the 


Listing 3. add to preload.js 


ji gai ieubler ares 


FUNCE+ On) preimi | Y{ 


‘none’; 


document body.style.drsplay = 


Funct Lon postimaic () { 


S$ (document .body) .fadeIn(500); 


Listing 4. Add to core.inc 


Add just after echo BODY; 


Senos “Seri peel mi io serimr 


Listing 5. Add to core.inc 
hdd just betore ob vend lush) 


SCHOO TSC CIDE pect unnnt) scrip: 


"http: //www.w3.org/TR/xhtml1/0TD/xhtmll-strict.dtd"> 


<meta http-equiv="Content-type" content="text/html; charset='iso-8859-1'" /> 
<Link rel="stylesheet" type="text/css" href="/stylesheets/reset.css" /> 

<Link rel="stylesheet" type="text/css" href="/stylesheets/global.css" /> 
<script src="/javascript/jquery- 1.10.2.min.js" type="text/javascript"></script> 


<script src=" 


" type="text/javascript"></script> 


<script src="/javascript/preload.is" type="text/javascript"> 


</script> 


<title>FAQ 1</title></head><body><div id="faq"><div id="heading" 


class="heading-1">First FAQ</div><div 


id="content" class="content-1">Aenean volutpat, ligula vitae laoreet dapibus</div><div class ="menu-navigation"> 


<h2>Navigation (pages)</h2><p>&nbsp;</p><button onclick="setnavitem('pages'); 


document. Location. reload(true);">l. 


Pages</button> &nbsp;<button onclick="setnavitem('faqs'); document. location. reload(true);">2. Faqs</button> &nbsp; 


<button onclick="setnavitem( 'news'); 


document. location. reload(true);">3. News</button> &nbsp;</div></div><div 


id="Licence"><a href="Licence.txt" title="Copyright and Licence details">Copyright &copy; 2013 Rob Somerville 
me@merville.co.uk</a></div><script src="/javascript/postload.js” type="text/javascript"></script></body></html> 


Figure 6. Page source showing button options 
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Listing 6. Add to mysql.inc 


Returns an array of rows or NULL on no result 
FUNC eLOn Mysql ererch rowel scl )an 
// Returns an array of rows or NULL if no result 


Sdb = new mysgli(DBSERVER, DBUSER, DBPASSWORD, 
CHSDE)r 


TET (db => Commecepcr rao > 0) 4 
die(‘Unable to connect to database [* 
CCl Cwlaeer Eieiese 4 | je 


} 
if ('Sresult = $db->query($sql)) { 
if (DEBUG) { 
die(‘There was an error running the query [* 
Sdob->error . ‘]’); 


} else { 
olme (as) le 


while (Srow = $Sresult->fetch row()) { 
ois) Ulla) Steels - 

// Free the result 

Sresult->free (); 

// Close the connect om 

Sdb->close(); 

if (isset(Sr)) { 
return Sr; 


} else { 
return NULL; 


Listing 7. Add to core.inc 


function arraytolinks (Smysqlfetchrows) { 
requilre INCKUDES — = “coOmeentownc. 


// Convert a MySQL result set into a set of links 


// Requires ID (page id), title and contenttype 


Sinke = <din selass— menulimka — 


clinikSe. =) <ul 

if (Smysqlfetchrows) { 

foreach (Smysqlfetchrows as Skey => Svalue) { 
// Convert the content type to the relevant 

table name. 


See sCOnrent ine 


Celta = sicily Secieca (Ovals ||” ||, Seemesac 


tables); 


links =| lie <aeret—“/" soatha 7 ovale (Ol. 
title="'.Svalue[1].’”>’. 


Svalwie [i] </a> lis” 


} 
SHbiniks ie ile ee 
Sinks = / Cane: 
}else{ 
Slinks .= “<li>Sorry = no content available</ 
ae wl oc 
} 


return Slinks; 
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Listing 8. Full listing of menu.inc 


<?php 


function menu(Stype) { 


require INCLUDES Pec Mibeiie piiier7, 


if ($type == ‘navigation’) { 


Sorrset = 1> 
7 Cavedorics) — COUNE (convene, eables), 
Soqie—s 1) 


Sop elon = "> 


di (Gee one Welle © iis cOelaS ane Sac 


if (isset($ COOKIE[‘navmenuitem’ ]) ) { 
emenuvalue = 5 COOKIE[ ‘navmenuitem’ |; 
}else { 


Smenuvaliue = 


‘pages’; 


foreach (Scontent tables as Scontenttype) { 


7/7 Bovid Ehe option for ene Content type 


Soption .= ‘<button onclick="setnavitem(\’’. 


Scontenttype.’\’); 


document: locatzon, reload (true) ;"S' -Sofrset.”. 


Vuchest (Scontenttype). </button> tnosp, 


Soffset ++; 


// Build the SOL statement for the menu item selected 


Ssql = “SELECT id,title,’”.Smenuvalue.”’ AS 


contenttype FROM “.Smenuvalue.” 


WHERE stetus = 2 ORDER BY title-;:”- 


Hi (Gee tele waSseie 


~Lesuley— imysd es rsvenrows (ose i); 


// Convert the array into HTML links 


slinks = arraylolinks(sresult) > 


Sleigh = es 


Smenu .= ‘<div class ="menu-’ 

smente, = <2" Uctinet(atyoe) 
Smenuvalue.’) - ‘.Scategories.’ 

categories</h2>’; 

Smenu .= ‘<p>&nbsp;</p>’; 

Smenu .= Soption; 

Smenu .= Slinks; 

Smenu .= ‘</div>’; 


return Smenu; 


Listing 9. Changes to faq_tempate.inc 


render (Stheme[ ‘heading’ ]) ; 
render (menu ( ‘navigation’ )); 


render (Stheme[ ‘content’ ]); 


Listing 10. Modify global.css 


.menu-navigation { 
#E5E6AD; 
border: lpx solid #DADADA; 


background=co lor: 
Padding: 10px; 
Hogi: Lignin. 
iileniele ligt alkene) ef ellen. 


Mac Ti=DOk bom: hUiox- 


#news, #page, #faq { 


border: lpx solid #DADADA; 
ienalea ol eejeys JL e\Ohep.<k 
padding: 2 0px; 

min-height: 640px; 


overflow: auto; 


render (Stheme[ ‘heading’ ]) ;) 


render (menu(‘global’)); 


Listing 12. Add to preload.js 


function globalmenu() { 


Stype 


\ 


Ss(function() {S( “menu” ).menu();})-; 


( \ 


Listing 11. Add global menu support to News, FAQ and pages 
templates 


Add at the beginning of each file (e.g. just before 


NG 
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Listing 13. header.inc 


Mic ty / WWW wo. Org, TRY xhimil/ DED) xnimil=siieiok adidas > 


<head> 


</script> 


<!DOCTYPE html PUBLIC “=//W3C//DID XHTML 1.0 Strict//EN” 


<html xmlns="http://www.w3.org/1999/xhtml” xml:lang=”"en”> 


<meta http-equiv="Content-type” content="text/html; charset=’iso-8859-1'” /> 
<link rel="stylesheet” type="text/css” href=”"/stylesheets/reset.css” /> 

<link rel="stylesheet” type="text/css” href=”"”/stylesheets/global.css” /> 

<link rel="stylesheet” type="text/css” href="”/stylesheets/jquery-ui.css” /> 
<script srce=”"/javascript/jquery-1.10.2.min.js” type="text/javascript”></script> 
<script src=”"/javascript/jquery.cookie.js” type="text/javascript”></script> 
<script srce=”"/javascript/jquery-ui.min.js” type="text/javascript”></script> 


<script src=”"/javascript/preload.js” type="text/javascript”> 


page should load the default menu type of Pages (Figure 
5). The titles have also been cleaned up using the PHP 
ucfirst() function call to uppercase the first character 
of the selection, and we have added a sequential option 
number to each menu item. 

One disadvantage of this method is the following piece 
of code as shown in (Figure 6). Each button has two piec- 
es of Javascript attached, setnavitem() and document. 
location.reload(). The former sets the cookie via our 
function call in postload.js (and subsequently via the 
jquery.cookie.js script) and then refreshes the page. This 
causes the page to flicker every so often when the con- 


FreeBSD. 


(Hic Pages 
My fret page 
age header News 


Lorem ipsum doll pages 
Phasellus mon orci massa, nec feugiat sem, Vestibulum molesie interdum bibendum, Mune quis oli 


ecletur adipiscing elit, Mauris interdum auctor tellus sed dignissim. 


nulla, sit amet ruirum lorem. Quisque odio est, sagittis nec accumsan ul, placerat sit amet lectus 


Figure 7. FAQ page menu 
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Third FAQ 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eros | Mavigation (pages) -Jcalegodes i 
nibh, dapibus sed suscipi mec, sollicrudin congqué ante. Nulla lacwia 1 =H ITY 


& Pages i 2. Fags | 1. News it 
ullamcorper tristique. Nam id malesuada arcu. Pellentesque diam eros, oy... a 


Warns al consequal Sit amet, Blainat Ul neque Danec lempor cagnissim | 
lacus, sit amet faucibus leo. In commode omare sem, non euismod — 


nunc alguet solicitudin, Sed solicitudin augue al lacinia tempor. Curabitur Egula elit, vestibulum sit 


Figure 8. FAQ fags menu 


www.bsdmag.org 


tent is reloaded. A better way of implementing this would 
be to use Ajax, but for the time being, we will demonstrate 
a useful Jquery call — Fade in. 

Add the following code to preload.js (Listing 3) and core. 
inc (Listing 4 and Listing 5). 

This will halt the display of the page, allow the menu to 
be built etc. and the page will then fade in. The time can 
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Lorem ipsum doler sq amet, consectetur adipiscing alt, Aliquam eras - Mavigation (lags) - 3 categories 
nibh, dapibus sed suscipit nec, sollicttudin congue ante. Nulla lacinia + Faas 


| 1 Pages 1 2. Fags | News i 
ullameorper tristique. Nam id malesuada arcu. Pellentesque diam eros, | $5.5, = aA 
Vanus al consequat sil amet, blandit ul neque. Donec lempor dignissim ass 
lacus, sit amet faucibus leo. In commoda omare sem, non euismod 
nunc aliquet solicitudin. Sed sollicitudin augue at lacinia tempor. 49 


Curabtur ligula eft, vestibulum sit amet lacus vitae, cursus rufrum | 


sapien. Aliquam elementum, augue a sodales venenalis, odio mi a) 
lempus ipsum, congue gravida turpls est eu sapien. Nam viverra turpis ee 
non risus auctor vehicula. Etiam nibh diam, interdum non ultricies a, - 
dapibus vel purus, Aliquam convalis interdum magna, Curabdur vilae lobortis massa, Nam pulvinar sed 
diam in adipiscing. Etiam ac lectus at purus porta vulputate. Integer convallis volutpal odio, eu lobortis 


Figure 9. FAQ news menu 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam @roS Havigation (news) -: 

Y . A 

nibh, dapibus sed suscipit nec, sollicitudin congue ante. Nulla lacinia — 
ullamcorper tristique. Nam id malesuada arcu. Pellentesque diam eros, , «. 

4 Pst 


VArIUS al consequal sl amel, blandd ul neque. Donec tempor dignissim _ 
lacus, sit amel faucibus leo. In commodo amare sem, non evuemod 
nunc aliquet sollicitudin. Sed sollicitudin augue at lacinia tempor. Curabitur ligula elit, vestibulum sit 


amet lacus vilaé, CUrSUS rulrTum Sapien. Aliquam élemeénium, augue a Sodales venénalis, odio mi 


Figure 10. Jquery multi-level menu 
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be adjusted by incrementing or decrementing the fadern() 
parameter. While this is not an ideal solution, it does dem- 
onstrate the ease of integrating Jquery with a web page. 


Step 2 - Displaying the links 
Now we need to plug in the SQL result to our menu mod- 
ule. Add the following code (Listing 6-8). 

We now need to make a few minor modifications at the 
theme and CSS levels, so change faq_template.inc to dis- 
play the menu before the content (Listing 9). 


Listing 14. Additions to menu.inc 


Add elseif at the end of the navigation block 


Smenu .= ‘<div class ="menu-’ . Stype . ‘”>’; 

Smenu .= ‘<h2>’ . ucfirst(Stype) . ‘ (*. 
smenuvalue.’) —- ‘.Scategories.’ 

categories</h2>’ ; 

Semi = 9 ““p>anbso, <7 p> | 

Smenu .= Soption; 

Smenu .= Slinks; 

Smenu .= ‘</div>’; 


return Smenu; 


}elseif (Stype == “global”) { 


?> 


<ul id="menu”> 
<li><a href="/">Home</a> 
<ul> 
<li><a href="/page/1”>Pages</a></1i> 
<li><a href="/news/1”>News</a></1i> 
<li><a href=”"/faq/1”>FAQ’ s</a></1li> 
</ul> 
</li> 
</ul> 


<?php 


Listing 15. Add to global.css 


-Ui-menu { 


Wacicn: 1 p0ps- 
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Useful links 
Jquery UI source — http:///queryui.com/resources/download/ 
Jquery-ul-1.10.3.Zip 
Jquery menu reference — http:///queryui.com/menu 


This will float the navigation menu on the FAQ page to 
the right and increase the height of our news, page, and 
FAQ content to accommodate the new menu. 

See (Figure 7-9) for the final result. | added an extra “Ip- 
sum Lorem” to pad the content out in FAQ 3. Note how the 
menu responds to user input decoupled from the content 
that the user is currently visiting. 


Step 3 - Global website menu 

Jquery provides an extensive library for the user interface. 
Rather than building the Javascript and CSS from scratch, 
we can install the CSS and JS libraries quickly into 
our CMS. 

Download Jquery-ui-1.10.3.zip and extract Jquery-ui. 
css into the stylesheets directory and Jquery-ui.min.js into 
the javascript directory. Use MC, or extract the file into a 
temporary area using unzip. 

Add the global menu to all of our content templates (news _ 
templates.inc, pages template.inc and fags tempate. inc) 
and add the Javascript function to preload.js. Add the Ja- 
vascript and CSS files to the header.inc file and add a new 
menu option to menu.inc and finally tweak our CSS file to 
reduce the width of the menu (Listing 11-15). 

Finally, visit the homepage of your site with your browser, 
refresh the page and voila, one multi-level menu (Figure 10). 


In the next part 
We will continue refining the menu system and start build- 
ing the user interface. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid-eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 
handy just in case. 
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FreeBSD Programming 


Primer — Part 8 


In the eighth part of our series on programming, we will refine our 
Jquery menu and start building a user friendly interface to add 


content. 


What you will learn... 
« How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


What you should know... 


¢ BSD and general PC administration skills 


the Jquery library. Looking at menu.inc, we see the 
menu is “hard coded” with a top level menu Home, and 
sub menu’s Pages, News and FAQ’s. To make our CMS 
user friendly, ideally we would store the menu values in a 
database table that we could access and amend from a 
web form (Listing 1 and Figure 1). 
Rather than building a custom page for each table, it 
would be good practice to design a set of global functions 
(e.g. sign on, retrieve fields, save fields etc.) and design a 


| n the previous article, we implemented a menu using 


FreeBSD. 


Home Papes 


Page HeadeRas 


My first page FAQ'S 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum auctor tellus sed dignissim. 


Phazellus mon orci massa, mec feug at sem. Westibulum molestie interdum bibendum. Nunc gus eh 
nulla, sit amet rutrum jorem, Quisque odio est, sagitlis nec accumsan ul, placeral sit amet lectus, 
Curabitur aliquam dignissim felis, a malesuada leo fringilla at. Sed ornare abquet lacus, quis imperdiet 
augue mattis eu, Nulla porta odio ut erat consectetur al molestie justo suscpil, Aenean convallis 


pallentesque nisl, vilae posuere mauris facilisis vitae, Morbe in tellus msl, vel facilisis diam, 


Figure 1. Original Jquery menu 
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template that we could change on a per table / form basis. 
We could then quickly build forms to modify each type of 
content. We also need to tweak the CSS for our dropdown 
menu. At the moment with the default CSS, the menu is 
floating to the left hand side. We will modify this to accom- 
modate a wider menu with more options. 


Step 1 

For the initial testing, we will hand code a menu in menu. 
inc and add a few placeholders. Once we are happy with 
the CSS, we will then add this to a database table and 
add our forms. In the next article, we will write the code 
to extract the menu values and fire them into Jquery. 


Listing 1. menu.inc 


<ul id="menu”> 

<li> 

<a href="/">Home</a> 

<ul> 

<li><a href="/page/1”>Pages</a></1li> 
<li><a href="/news/1”>News</a></1i> 

<li><a href="/faq/1”>FAQ’ s</a></1i> 

</ul> 

</li> 

</ul> 
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FreeBSD, 


Hone Pages News FAs Login 


Figure 2. Jquery menu horizontal 


FreeBSD. 


Home Page: Page 1 Fas Login 
My second page Page 2 
Ht 
Be Page 3 
é 


Figure 3. Jquery menu with drop down menu 


Listing 2. Replacement Jquery menu 


<div id="jquerymenu”> 

<ul id="top-menu-home”> 
<li><a href="/”"”>Home</a></1i> 
</ul> 


<ul id="top-menu-pages”> 
<li><a href="”">Pages</a> 
<ul> 
<li><a href="/page/1”>Page 1</a></li> 
<li><a href="/page/2”>Page 2</a></li> 
<li><a href="/page/3”>Page 3</a></li> 
</ul> 
</li> 
</ol> 


<ul id="top-menu-news”> 
<li><a href="">News</a> 
<ul> 
<li><a href="/news/1”>News 1</a></1i> 
<li><a href="/news/2”>News 2</a></1i> 
<li><a href="/news/3”">News 3</a></1li> 
</ul> 
</li> 
</ul> 


<ul id="top-menu-faq”> 
<li><a href="">FAQ’ s</a> 
<ul> 
<li><a href="/fag/1”>FAQ 1</a></1li> 
<li><a href="/fag/2”>FAQ 2</a></1li> 
<li><a href="/fag/3”>FAQ 3</a></1li> 
</ul> 
</li> 
</ul> 


<ul id="top-menu-user”> 

<li><a href=”"/login.php”>Login</a></1i> 
</ul> 
</div> 


Listing 3. preload.js 


function globalmenu() { 


S(funecrvon() {S{ “Fteo-menu—home” )-menu() -})-> 


S(function() {$( “#top-menu-pages” ).menu();}); 


S$(function() {$( “#top-menu-news” ).menu();}); 


S(function() {$( “#top-menu-faq” ).menu();}); 


s(tunction() {S{ “#top-menu-user” 


Penenu Qh). 


Listing 4. global.css 

#jquerymenu { 
border: lpx solid #DADADA; 
iinewateslignlorore coils  IQjen< 
height: 48px; 
padding: Spx; 


background-color: #e8e7cf; 


.ui-menu{ 


float: leit: 
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Listing 5. create the menus table 
ROM INFORMATION SCHEMA.COLUMNS 


HERE Cable schema = “freebsdcms’ 


i 

CREATE TABLE “menus” ( W 
“id* int(11) NOT NULL AUTO INCREMENT, AND SEAS NAVE = == SPSS 

O 


[Groupe Svensenad (7) eNO le NUN BDRM EY Stab let name, moredinalroos tEton ; 
“menutitle  varchar(12) NOT NULL, 

“titleurl*® varchar(12) DEFAULT NULL, // The tables we will allow the user to edit via this 
~submenutitle* varchar(50) DEFAULT NULL, form 


~submenutitleurl* varchar(50) DEFAULT NULL, 


“order int (2) NOr NULL DEFAULT “07, Stables[] = “fags”; 
“enabled int(1) NOT NULL DEFAULT ‘1’, Stables|] = “menus”; 
“timestamp timestamp NOT NULL DEFAULT CURRENT _ Stables[] = “news”; 
TIMESTAMP, Stables[] = “pages”; 
PRIMARY KEY (*id*) 
) ENGINE=InnoDB DEFAULT CHARSET=latinl; // Fields that are automatically assigned via a default 


value in MySQL table 
Listing 6. populate the menus table // definition 


LSE RE Ol menus "(id Forel — menvliele tere leniel > 


“submenutitle’, Sckiplist | j= “id: 
~submenutitleurl’,° order’, enabled’, timestamp’) VALUES Sskiplist[] = “timestamp”; 
Cl jquerymennw ~ Home’ -’/" NULL NULE I)” 2013-09-07 
ITSO UG yn 
(2,’jquerymenu’ ,’ Pages’ ,NULL,NULL,NULL,2,1,’2013-09-02 IE VE I GG Wa aa 
Tio ool, FEA ATAS AIA SAAT ATES TELE SA TATE IA IATA DS TEI Vd ay 
(3,’jquerymenu’ ,’ Pages’ ,NULL,’ Page 1’ ,’/ ALGERIA Ly 
Dade le AOS Oe e338 a) 
(4,’jquerymenu’ ,’ Pages’ ,NULL,’ Page 2’,’/ // Build the page up to the body tag 
Wage oe le Ue SO 7 ea eee yy 
(5,’jquerymenu’ ,’ Pages’ ,NULL,’ Page 3’,’/ outfile (TEMPLATES . ‘header.inc’ ); 
page s/o 0 2018-09-07. lie oe er): echo wraptag(‘title’, ‘Content Input’); 
echo HEAD; 
Listing 7. amendcontentpage.php echo BODY; 
<7 No 


// Page control Logie 
require once ‘includes/cms.inc’; 
require INCLUDES . ‘content.inc’; te(isset (> POST | table |) ), 


require INCLUDES . ‘core.inc’; 


require INCLUDES . ‘html.inc’; // User has not selected a table or we are testing 
require INCLUDES . ‘mysql.inc’; their result 
// SQL statements St =o. POst| “table” |; 
9sql[0] = “SELECT COUNT (DISTINCT TABLE NAME) FROM vias lio genqies Wit Sicelediers) 
INFORMATION SCHEMA.COLUMNS 
WHERE, Gable schema = “ireebsdems’ jj) Mbt tele icalolie 1 imo om ellilowecl Intec, [oasill ice 
AMIN DY, AVMs Een IN NUS SS Ie the first page 


Seq ij) “Sshleer 
TABLE NAME, COLUMN NAME, COLUMN DEFAULT, IS_ build page 1($tables) ; 


NULLABLE, DATA TYPE, 
CHARACTER MAXIMUM LENGTH j}else{ 
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// Check selected table is valid 
ss = Ssql [0]; 
// Replace the marker in the SQL statement with 
the chosen value 
Sie = Sse ieejellicycte. (Qt Ie Ste se) 4 
suceetlle = iy tedh sellers (Si) 3 
; Volidmeablenecoune — otcou le | VeOUNT (DI STINeT 
TABLE NAME) 7]; 
Tf (ovalid table count =— 1) { 
// Valid table selected - present form to 
edit data 
UPI eager (i, sdk skip lis c), 


}else{ 


// Send user to first page 
leiOaLILel joeleje) IS cele lise) 


jelseif (isset($ POST[“update”])) { 


// Save the input. As we have not validated this, 


WuSst display for mow 


loulmibel josie SS JP0Isi") » 


}else { 


i) Loavealia valiies— =renubhn wo stare 


buridseagewi cables 


ree ee eee, 
(I a Ga ae ae eG aaa ies aa ar 
OI IT TG II La ey 


function build page 1(Stables) { 


(7 Mie nonin Gein) elon 


echo ‘<div id="content”>’; 

echo ‘<div id="php”>’; 

echo ‘<div id="hl’>1: Select content</div>’; 

echo ‘<form action="amendcontent.php” method="post”>’; 


echo ‘<select name="table”>’; 


foreach (Stables as St) { 


// Stables is an array - split each value out 


echo . <option, value=" ot. Sok = option = 


jy Kinish form and. add. .ooter 


echo ‘</select>’; 

echo ‘<input type="submit” value="Select content to 
edits"; 

echo ‘</form>’; 

echo ‘</div></div>’; 

echo ‘<div id="licence”>’; 

echo ‘<a href="licence.txt” title="Copyright and licence 
details”>Copyright &copy; 2013 Rob Somerville me@ 
merville.co.uk</a>’; 


echo ‘</div>’; 


sUlelenerlreyo! Ioialiel jeeieie 4 (Sic, Seell e Siejo lei) || 


// HTML form 


echo “<div a1d="content’>”; 

echo ‘<div id="php”>’; 

echo “<div ad="hl’>2* Edit. <?php echo st; 
P>enbsp, content</div=’ = 


echo ‘<form action="amendcontent.php” method="post”>’ ; 


// Get the schema for that particular table 


oe 
Ss 


ssql[1]; 
Ste replaced) =——h0s= =) Oe en) 


Sesetilic = wysoll weiechucoins (os) 5 


Sdivstart = ‘<div class="inputname”>’; 
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echo ‘<input type="hidden” name="update” echo ‘<input type="submit” value="Save changes”>’ ; 
Velue= St): echo “</form> 
echo.) /¢a <7 di7~ 
foreach (Sresult as Srow) { echo ‘<div id="licence”>’; 
echo ‘<a href="licence.txt” title="Copyright and licence 
// Loop through each field and build the form details”>Copyright &copy; 2013 Rob Somerville me@ 
fields depending on the field // type merville.co.uk</a>’; 
echo ‘</div>’; 


Stield = Srowl |; 


Sfieldtype = Srow[4]; } 
ibe (Mabel Weigiceyy (satkedlicl, “oisicijellatisye |) | function build page 3(Spost) { 
if (Sfieldtype == “varchar”) { // HTML 
echo Sdivstart . uctirst (Sfield) .’</ echo ‘<div id="content”>’; 
dave input @lass="vVarchar” echo ‘<div id="php”>’; 
type="text” name="' .Sfield. ‘”><br />'; echo ‘<div id="h1”>3: Save content</div>’; 
echo ‘<ul>’; 


Jelseif (Sfieldtype == “int”) { 
foreach (Spost as Skey => Svalue) { 
echo Sdivstart . ucfirst ($field) .’</ 


div><input class="int” // Just loop through and dump out values - we need 
type="text” name="' .Sfield. ‘”><br />'; to validate before adding to DB 
jelseif (Sfieldtype == “text”) { Gecho *<lil><o- 2 okey. ~/o- .) evelue. 1a 
echo Sdivstart . ucfirst (Sfield) .’</ } 


div><textarea rows="10" cols="30"” 
class="textarea” name="' .Sfield. ‘”></ /) Bnew or orm 
textarea><br />'; 
echo “</wil><br 7 >"; 
}else { echo ‘<a href=”amendcontent.php”>Return to add content</ 
aoe 
// Shouldn’t get here 


echo ‘</div></div>’; 


echo ‘Error field(*.Sfield.’) 2 echo ‘<div id="licence”>’; 
SHOW LA sult o OW he we is Siow PA ie | echo ‘<a href="licence.txt” title="Copyright and licence 
SrOw lo |e. Soi fo details”>Copyright &copy; 2013 Rob Somerville me@ 


Ment iiene@o wu) a0 s 


echo ‘</div>’; 


/7 Pinas Lorm and ade POoLeE 


echo ‘</select>’; 
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Replace the code in (Listing 1) with the code in (Listing 2) 
and modify preload.js as well as global.css to match (List- 
ing 3) and (Listing 4). This will provide the menu as shown 
in (Figure 2 & 3). 

Add jquery support for each menu: Listing 3. Add some ad- 
ditional CSS so that the individual menus line up: Listing 4. 


Step 2 - Create the menus table 
In MySQL, create the menus table (Listing 5). Populate 
with some basic menus (Listing 6). 


Step 3 - Build the amendcontent page 
The amendcontent page is a PHP script that allows the us- 
er to add new content to the CMS. As we have not validat- 


Listing 8. additions to global.css 


#tphp { 
min-height: 640px; 
margin-top: 160px; 


svarchar { 
background-color: #ced8f8; 
border: lpx solid #FFF; 
} 
SEGUE | 
background-color: #cef8f5; 
border: 1px solid #FFF; 
} 
.textarea { 
background-color: #e3f£3dc; 
border: 1px solid #FFF; 
} 
.inputname { 
color: tomato; 
font-size: 12px; 
width: 100px; 
float: left; 
font-weight: bold; 


Figure 4. Select the table to edit 


www.bsdmag.org 


Group Crows hace 
Wacuttla Mestu LiEle 
Titeur! https! haw. goagie.comn 


a 


3: Save content 


Updale: Menus 

group: Group name 

menutitle: Menu title 

eur: Pits Ww Wid POC HE COM 
SSUES FeLi 

Ssubmenutitheurl: 

order: 12 


enadied: 1 


Retuin to add content 


Figure 6. What will be saved 


Useful links 

« Jquery UI source — http://queryui.com/resources/download/ 
Jquery-ui-1.10.3.Zip 
Jquery menu reference — http://jqueryui.com/menu 
PHP manual — http://php.net/manual 


ed the user input yet, we'll just capture the input for now. 
Create a new PHP file called amendcontent.php in the root 
directory where index.php is already saved (Listing 7). 

We need to add a small modification to global.css to line 
up the fields (Listing 8). Now visit http://voursite/amend- 
content.php and you will have a dynamic form ready to 
save data to any table in the CMS. See (Figure 4-6). 


In the next article 

We will use the data from the menu tables to populate the 
Jquery menus and write some validation code for the user 
input prior to saving to the database. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid-eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 
handy just in case. 
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In the ninth part of our series on programming, we will add some 
security to our CMS and refine our interface for adding content. 


What you will learn... 
- How to to configure a development environment and write 
HTML, CSS, PHP and SQL code 


amendcontentpage.php which allowed the user to add 

data to any table in the CMS (Figure 1 & 2). We will re- 
fine this page, and add a login page and the correspond- 
ing database table. Create a login table in MySQL to hold 
the user credentials (Listing 1). 

We require a blob field as we will be storing binary rath- 
er than string data for the encrypted password. The auth 
field will be used to define the user rights later on, but for 
the moment setting a value of 1 via the form we will con- 
struct will be sufficient. 

Now add the following to our global.css file to format the 
output from our amendcontent.php page (Listing 2). 

Create a file in the includes directory called login.inc 
(Listing 3). This holds the name and secret key for the 
login cookie. 

Create a new file login.php in the root directory of the 
application (Listing 4). 

Finally, amend amendcontent.php as follows. As there 
are a lot of changes throughout the file, the script is de- 
tailed here in its entirety (Listing 5). 

Hopefully, most of the code should be self explanatory, but 
here is a breakdown of the major functionality of each page. 


n part 8 of the series, we created the PHP script 


Login.php 
As we are storing the hashed value of the password in 
the database, rather than a text string that we can com- 
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What you should know... 


« BSD and general PC administration skills 


Titer Wthps ww. Gongke oon 


submenutitle 
submenutilkeurl: 
onder: 12 
enabwd: 1 


Figure 2. Saving the data 
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Listing 1. Create a login table in MySQL 


CREATE TABLE locin ( 


“username” varchar(25) NOT NULL, 
“password blob NOT NULL, 
“auth int(1) NOT NULL, 


PRIMARY KEY ( id~) 


Listing 2. Additions to global.css 


.tablehdr { 
background-color: rosybrown; 
color: white; 
float: left; 
font-size: 14px; 
font-weight: bold; 
line-height: 25px; 
padding: 10px; 
width: 22%; 

} 

.tablerowl { 
background-color: thistle; 
float: left; 
font-size: 14px; 
line-height: 25px; 
padding: 10px; 
width: 22%; 

} 

.tablerow2 { 
background-color: oldlace; 
float: left; 
font-size: 14px; 
line-height: 25px; 
padding: 10px; 
width: 22%; 


Listing 3. /ogin.inc 


<< Felays 


define (‘KEYNAME’ ,’gp19867fghlls’ ); 
define (‘LOGINKEY’ ,’117hkJ323230rT’); 


Listing 4. /ogin.php 
<7 pap 


require once ‘includes/cms.inc’; 


“timestamp timestamp NOT NULL DEFAULT CURRENT TIMESTAMP 


old) Vine (S) tins toned zero NOL NUE AUL Osun CR EMENIE: 


ON UPDATE CURRENT TIMESTAMP, 


) ENGINE=InnoDB AUTO INCREMENT=9 DEFAULT CHARSET=latinl; 


require INCLUDES . ‘content.inc’; 
require INCLUDES . ‘core.inc’; 
require INCLUDES . ‘html.inc’; 
require INCLUDES . ‘mysql.inc’; 
require INCLUDES . ‘login.inc’; 


i (SO Strat ements 


Ssql[0] = “SELECT password,auth FROM login 
WHERE username = ‘---PQ---’ 
AND Wassword = “soot ll==—" 
Ssql[1] = “INSERT INTO ‘login’ ( username’, ‘password’, 
‘auth’, “timestamp ) 
NW ROLTO Se oe 1 ee 
now()) 7"; 


TIES IO A A eal 
IA AIA I OI ea Ia I IG a ier 
LO PT DT TE OT a 


jy "Welete  iiese os Winessatter test Weer eagdded 


tf (lesset(>s POST action” | jj 


createnewlogin() ; 


TLIO IST II IID IM ISM TT MT Ta ie) I ley 12) 


// Page control logic 


tf (asset(> POST |“action™” |) }4 


PaCLLONe= © -POSR) action |; 


if (Saction “validate logai 9) 


if(isset($ POST[“username”]) && isset($_ 
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POSTE |“ password” |) 4 


Susername POLOoL i sername, 


-EOoL | pascwo ra: 4, 


Spassword 


// We have valid credentials, validate 


validatelogin ($username, 


"password, ooq il); 


jelseif (Saction == “createnewlogin”) { 


if (!isset($ COOKIE[KEYNAME] ) ) { 


// Create a new login to the system 


createnewlogin(Susername, Spassword,$sql) ; 


}else { 


// User failed cookie test, request them to 


login 


pegqucselOgiNG cba tlc), 


jelseif (Saction == “appendnewlogin”) { 


~USsername =o POoT| Username |; 
Spassword > POS! | password” |; 
cai — POST auth if; 


appendnewlogin (Susername, Spassword, Sauth, $sql) ; 


jelse { 


// Invalid actiom = request Togin detarls 


ie So ieete LOG winClecelILIS 0)? 


}else{ 


fy Wedges Swalcaiic: ie) jelerole 


ineoues c Lecriicleicellis |) 


TT IAG) SI 1 TTI a Te A 1G TA 6) Tele Ue) del 
AI TAI I ed 
TTI MIA PI el 1 16) S16 RIES A) 6/2) S/S 


function validatelogin(Susername, Spassword, $sql) { 


// As the password is hashed and hopefully cannot be 
decrypted, 


// We need to usend the encrypted password 


shashed password = hash(“whirlpool’, Spassword); 


// Fetch credentials from DB, if match create a login 


cookie 


os = osqliols 
Ss 
$s 
); 


Sine tess [SSI =! hibisieieeienile Ei) 5 


Sime josollees (Si Elms Sel jose swe! 7 os 


eestllic = imbisrelh ierceloucoiits | ois)) 3 


foreach (Sresult as Srow) { 


Sauiene = 9 Seow) lle 


if (Sauth == 1) { 
// Create auth cookie 
setcookie (KEYNAME, LOGINKEY, time()+3600, “/”); 
// sDasplay Oprlons 
Stitle = ‘Welcome ‘ . Susername; 
buildheader (Stitle) ; 


echo wraptag(“h1”, $title) ; 


echo ahref(‘Add or amend content’, ‘/amendcontent. 
php’); 
Dun dhoOote (i 


}else { 


j 7 Mey again 


BSD 


MAGAZINE 


| 


TBO 01/2014 


turn into blue. 


Professional services and solutions - Imperva, McAfee, HP Tenable. 
Penetration tests, Application Security, Managed Security Services (MSS). 


Do as largest companies in Brazil, contact us! 


> IBLIS 


SEGURANCA & INTELIGENCIA 


www.ibliss.com.br info@ibliss.com.br +55 11 3255-3926 


ADMIN 


PeGUSs WlOguN Cec rcl 


function createnewlogin() { 


Silt lhes =" Creare naw Uuser.: 


Sclacs =" oOrnconrcol = 


buildheader ($title); 
echo wraptag(“h1l”,Stitle) ; 


echo ‘<form action="login.php” method="post”>’; 


echo ‘Username’ div(‘<input type="text” 


name="username”>’,Sclass); 
echo ‘Password’ div(‘<input type="password” 
name="password”>’,Sclass) ; 


echo ‘Auth’ div(‘<input type="text” 


name="auth”>’,Sclass); 


echo ‘<input type="submit” value="Submit”>’ ; 


echo ‘<input type="hidden” name="action” 


value="appendnewlogin”>’; 


echo ‘</form>’; 


bulldiootrer (): 


function appendnewlogin ($username, S$password, Sauth, $sql) { 
// Create a new entry in the login table 
shashed password = hash( ‘whirlpool’, Spassword); 
os = ose lll ll: 
eS =) Site teseilece (Mi Ss Seicioemile 5 Ss |) 
Se) = iwc sesjolleics a eo shbeisinecl jee Saiveisel os 
); 


Se = sible ecllcieis) (= a Scie Ss) 8 


hy SCL, Selec ss) s 


ie Sole rc Locale eth |) & 


function requestlogindetails() { 


Stitle = “Please login”; 


Sclass =“ fLonminpuL > 


buildheader ($title); 


echo Wiraptag ( hl”, stitle): 
echo ‘<form action="login.php” method="post”>’ ; 


echo ‘Username’ div(‘<input type="text” 


name="username”>’ ,Sclass); 


echo ‘Password’ div(‘<input type="password” 


name="password”>’,Sclass) ; 


echo ‘<input type="submit” value="Submit”>’ ; 


echo ‘<input type="hidden” name="action” 
value="validatelogin”>’ ; 


echo ‘</form>’; 


buildfooter(); 


function buildheader ($title) { 


// As cookies need to be set before any output is 
sent to the browser 


// use a function call to build the page header 


// Build the page up to the body tag 


outfile (TEMPLATES ‘header.inc’); 
echo wraptag(‘title’, $title); 
echo HEAD; 

echo BODY; 

echo ‘<div id="content”>’; 


echo ‘<div id="php”>’; 


function buildfooter() { 


echo ‘</div>’; 

echo ‘</div>’; 

echo ‘<div id="licence”>’; 

echo ‘<a href="licence.txt” title="Copyright and licence 
details”>Copyright &copy; 2013 Rob Somerville me@ 
merville.co.uk</a>’; 


echo </div> = 
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Listing 5. amendcontent.php 


<< elals 


require once ‘includes/cms.inc’; 


require 
require 
require 


require 


INCLUDES 
INCLUDES 
INCLUDES 
INCLUDES 


Veontent inc — 
“CORE u LMG: 
Shite ere? 


My SO 2 me! ¢ 


/)  cOlmstcrements 


ssql[0] = “SELECT COUNT (DISTINCT TABLE NAME) FROM 
INFORMATION SCHEMA.COLUMNS 


WHERE table scheme = “freebsdcms” 
AND Ae he Na oS 
ssql[1] = “SELECT TABLE NAME,COLUMN NAME, COLUMN _ 


DEFAULT, 1S NULLABLE, DATA TYPE, CHARACTER MAXIMUM _ 


LENGTH 
FROM INFORMATION SCHEMA .COLUMNS 
WIKRE, Gable schema = “freebsdems” 
AND TAB EE NAMES = 0! 
ORDER. BY “calle name, Ordinal positron 7 
Soci =~ SELECT < PROM = 22 )--— ORDER BY td DESC | 
9sql[3] = “SELECT COLUMN NAME FROM INFORMATION SCHEMA. 
COLUMNS WHERE TABLE SCHEMA = ‘freebsdcms’ AND TABLE | 
NAME ts == —P0S >=) 
ssql [4] = “SELECT ~===P0=-—= FROM ==-Pi--— WHERE id =/== 
ey Seu, 


47 The tables wea wells allow tie User to ecir vial tints 


form 
Stables[] = “faqs”; 
Stables|) = “menus”; 
Stables[|] = “news”; 
Stables[] = “pages”; 


// Fields that are automatically assigned via a default 


value in MySQL table definition 


Sskiplicst |e —0 wey 
Sskiplist[] = “timestamp”; 


FAM IMG IIA TIO TATA III IA ye 
TT TSI To) TO) I eI Ta Ie) aS Map e ale el 3p fella opel (a) Tapes: 
| TO TAI IIIT TIO | TAGS ATTA I TIT 


7/7 Buald Ehe page up to Ehe body tag 


outfile (TEMPLATES ‘header.inc’); 


echo wraptag(‘“title’, “Content Input’); 


echo HEAD; 
echo BODY; 
// Page control logic 


HE(PSSeu(> POSE) cable on 


// User has not selected a table or we are testing 


their result 


Pte EOS E; table 4, 


Uf oC iets) Goin eeevel Les ))) at 


j// Vi the table is not om allowed list, bail “to 
the first page 


isbliiel preci lS cele esi) 3 
}else{ 

// Check selected table is valid 

ss = Seq (0]> 

// Replace the marker in the SQL statement with 
the chosen value 

Pore Semel COle@e (Naa P Uses Sy ee co a)e 

SieScilie = imhysell selec (se) 

“velo table coun —  otesulc| COUNT (DiSTINeT 
TABLE NAME)’ ]; 


Vf (Svalid table count =— 1) { 


// Valid table selected - present form to edit data 
lefblaLIel isco 2S ce, Sistepll Ss Slated neice) 


}else{ 


// Send user to first page 
buLicdipagee( cables 5 
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jelseif (isset($ POST[“update”])) { 


// Save the input. As we have not validated this, 


USE ers play Or Mow 


bullcdwpagees (2. POsl jy, 


jelseif (isset($ POST[“id”])) { 


// Save the input. As we have not validated this, 


PSE splay For mow 


echo “Updateold record”; 


}else { 


Jo Wawyellaveh wells = ieSie brea, we Sechae 


[SBLILCL jeievefS Ices Isis) 


(DIA IAD SA AI | IES JAI ADA, aaa 
IDOI GCE RIGGING IAGO GRIGIO (ey (ey 
TI TOTNES I UDO) SOM 1a 1a) aa 


ng bbaleiealote; JerbaeI el jeyskefey IL snc silellicss)| | 
// MIM form cdenniiiom 
echo ‘<div id="content”>’; 


echo ‘<div id="php”>’; 


echo. <diey id=] nil’ Selecr conten, cin, 


echo ‘<form action="amendcontent.php” method="post”>’; 


77 Sule thes list One babes 


Strableconbrol == 


Stablecontrol .= ‘<select name="table”>’; 


foreach (Stables as St) { 


Vi) “etebiles Wo an artay — split each value out 


Stablecontrol ~=" *<Opt1on value=" sot. “> 25h. </optton-: 


Stablecontrol 2= "</selece> = 


// Build the edit options 


\/ 


Seditcontrol = ‘ 


Seditcontrol .= ‘<input type="radio” name=”"inputmode” 


value="new” checked="checked”>Add new content’; 
Seditcontrol .= ‘<input type="radio” name=”inputmode” 


value="update”>Update current content’; 


// Sua the =submet option 


\/ 


Ssubmmrecontne l= 


Ssubmitcontrol .= ‘<input type="submit” value="Create 


content. S73 
// Bdd the DIV to Lormak tne controls 
echo div(Stablecontrol, ‘formcontrol’); 
echo diy (Seditcontrol,. “formcontrol’ ); 
echo div (Ssubmitcontrol, “founcontxnol’ |; 
// Complete the form 
echo ‘</form>’; 


echo ‘</div></div>’; 


echo ‘<div id="licence”>’; 


echo ‘<a href="licence.txt” title="Copyright and licence 


details”>Copyright &copy; 2013 Rob Somerville me@ 
merville.co.uk</a>’ ; 


ecno. “</div~’-; 


function build page 2( 1, -sq Skipper) 


7) EM Oran 


echo ‘<div id="content”>’; 


echo ‘<div id="php”>’; 


// Check we have a valid inputmode 


L£(!isset(> POST|[“inputmode”])) { 


echo “Error: Invalid inputmode”; 


exit; 


}else { 
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L£(S POST [“inputmode”] == “new” || (isset(s 


BOSD |) row) 4 


// New content - populate with selected value if we 
have arrived here 


// via an update content request. 


if(isset($ POST[“rowid”])) { 


srowid = 5 POST[“rowid”]; 
Spopulate = TRUE; 


jelse{ 
icemauel = *"s 


Spopulate = FALSE; 


echo ‘<div id="h1l”>Create new ‘.St.’ content</ 
Gini 
echo ‘<form action="amendcontent. php” 


method="post”>!; 


// Get the schema for that particular table 


Ss 
a6 


ssql[1]; 
Stu veplace( “=--PU=-=" 3, 8t 72s 


pLesulGy— Mysql ybovenvows (5); 
Sdivstart = ‘<div class="inputname”>’ ; 


Sacrilon —=_ saver > 


echo ‘<input type="hidden” name="update” 


Wale!“ ita ei 


foreach (Sresult as Srow) { 


// Loop through each field and build the form fields 
depending on the field type 


Sfield = Srow[1]; 
Sfieldtype = Srow[4]; 


ig (a abiay euicicely (sinvenicl, Sisiiamelalisyc, |) | 


if (Sfieldtype == “varchar”) { 


Svalue = populatefields ($sql [4], $field, $t, $row 
id, Spopulate) ; 


echo Sdivstart . ucfirst ($field) .’</div><input 
class="varchar” type="text” name="' .Sfield. ‘” 


value="' .Svalue.’”><br />'; 


jelseif (Sfieldtype == “int”) { 


Svalue = populatefields ($sql [4], $field, $t,$ro 
wid, Spopulate) ; 


echo Sdivstart . ucfirst ($field) .’</div><input 


class="int” type="text” name="' .Sfield. 


value="".Svalue.’”s<br />': 


Jelseif (Sfieldtype == “text”) { 


Svalue = populatefields ($sql [4],S$field, $t, 
Srowid, Spopulate) ; 


echo Sdivstart 2 uUcirst (Siielid) 2’ </ 
div><textarea rows="10”" cols="30”" class="textarea” 


hamne—"S sholds "> o ovalte.  </ textarea or) >": 


}else{ 


// Shouldn’t get here 


echo “Error field(*.Sfield.’ ) 


SEOWI2 ee ee cow lols lo row | 4" (M2 otsow 1) eo 


oe 


V eehnon <7) collects - 


jelse1f(> POST[“inputmode”] == “update”) { 


echo ‘<div id="h1”>Select content ‘.$t.’</div>’; 

echo ‘<form action="amendcontent.php” 
method="post”>’ ; 

echo ‘<input type="hidden” name="table” 


Welles 7) Sine ee 
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echo ‘<input type="hidden” name=”"inputmode” 


value="new”>’; 
Ss = Ssql|3]; 


// Replace the marker in the SQL statement with the 


chosen value 
Do = ssi ep lace (= PUa— Fete oe. \e 
if (St == ‘menus’ ) { 
// DB schema 1S diltrerent 
¥/ NBew Maximum cols — 3 unless mods to: CSs 
performed 
Sdisplaycols = array(2, 4, 5); 
}else { 


// Everything else 


sdisplaycols’= array (iy 2.272): 


// Get the field names for our table 
Siedic es — ise ies celmigenirs| (Sis) 5 

// Build the title row 

echo div(‘Select’, ‘tablehdr’); 
foreach (Sdisplaycols as Soffset) { 


echo div(Stitles[Soffset][0], ‘tablehdr’); 


Ss = Ssqi|2]; 
Szebra = 0> 


Saction = ‘Update’; 
// Replace the marker in the SQL statement with the 
chosen value 


SS) Ste replaces (( ===PUea= ok fess i, 


Sessile — inky seicelicoiis os)! 5 


foreach (Sresult as Srow) { 


if (Szebra == 0) { 
Sclass = “tablerowl’? 
Szebra = 1: 
jelseif ($zebra == 1) { 
Sclass = “tablerowzZ’ 
Szebra = 0; 


Jf Radio bumwon) Cont col 


Seditcontrol = ‘<input type="radio” name="rowid” 


Valie=""orow (Ole 3 + 


j// Check formatting end output 


formareconkentediut(srow, Sclass, sdasplaycols, 


Seditcontro) 


}else { 


echo “Error: Invalid inputmode”; 


exit; 


// Finish form and add footer 

echo ‘<input type="submit” value="" .Saction.’ *.st.’ 
item”’>’; 

echo ‘</form>’; 

echo ‘</div></div>’; 

echo ‘<div id="licence”>’; 

echo ‘<a href="licence.txt” title="Copyright and licence 
details”>Copyright &copy; 2013 Rob Somerville me@ 
merville.co.uk</a>’; 


echo “</div- - 


www.bsdmag.org 
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function build page 3(Spost) { 


// HTML 


echo ‘<div id="content”>’; 
echo ‘<div id="php”>’; 


echo 


echo ‘<ul>’; 


Oy i= ik Save COnueni Gin > 


foreach (Spost as Skey => Svalue) { 


// Just dump out values - 


adding to DB 


echo “<li> <b- okey. <b 


jy, Mayol (one atenenn 


echo 


echo 


Sb 7 


we need to validate before 


heesaie bbls 6) bile ec 


foreach (Sdisplaycols as Soffset) 


j// Pirst Check we have some content — use a NBSP 


it NU oe lank 


Te(omow | oomeser|——— 


Srow|Sortiset|] = 


/7 smsuce lengti< 25 7charcs, 


if (strlen (Srow[Soffset] ) 


Srow[Soffset] = substr(Srow[Soffset],0,24) 


*enbSsp,” 3 


eo | 


{ 


else add elipses 


// Display each field from the row 


‘<a href="amendcontent.php”>Return to add content</a>’ ; 


echo 
echo 


echo ‘<a hrei 


echo 


function formatcontentedit (Srow, 


a dive 1 


\oay d= teence > 


details”>Copyright &copy; 2013 Rob Somerville me@ 


Merv leme On mica a o* 


ty) Guys 


Sclass, scisplaycols, 


Seditcontrol) { 


// Formats the rows from our select query in zebra 
OdMele.: 

// To prevent the CSS from breaking due to NULL 
COntenir 

// and displays the appropriate rows as the menu 
schema is 


// different from everything else. 
// Display the radio button 
oclass); 


echo div(Seditcontrol, 


// Format each row 


="Jicence.txt” title="Copyright and licence 


echo div(Srow[Soffset], 


function populatefields ($sql, $field, $t, Srowid, $populate) { 


if (Spopulate) { 


Ss = str replace ( *-—-P0-——’ 
SS = str replace ( ‘==—Pl=-—" 
Sg Glee iwe(silcieien (S12 — 


Sv = mysql fetchrows ($s) ; 


Sv OW nO: 


Svalue 


}else { 


W/T 


Sva luce = : 


return Svalue; 


SeOlassiy; 


PO elieicl Seal 
je ys 2S oe 


po Susten mela Sys) 


7 


BSD 


MAGAZINE 


TBO 01/2014 


FreeBSD Programming Primer - Part 9 


FreeBSD. WP) FreeBSD, 


Select content 
fay 


Create new user 


Username 
= ® Add new content © Update current content 
Password Gansta conten 
Auth 
Submit 
Figure 3. Creating a new user Figure 6. Choose your content type add new or update 


FreeBSD. FreeBSD, 


Please log n Creale new fags content 
Username Ts 
Isaemetingy 
Password Conte 
Submit 
Sad Fg item 
Figure 4. Logging in Figure 7. Adding anew FAQ 


FreeBSD. FreeBSD, 


Weloome admin Select content fags 
Add or amend content Select heeweding content 
Tenth FAD denean voluipal Iga 
Fags Ninth Fach Aenean woluipal bgula 
ry Faas Eighth Fad Aenean veluipal ligula 
FAG Seventh FAC Jeaeur ecieat ele 
Fags Sixth FAG Aenean velsipal Dgala 
Fags Fifth FAQ Aenean volutpat lela 
FaAQ4 Fourth Fla Aenean volipal liga _. 
FM Thind FAG Lonem ipsum devior sf avy 
FAQ Second Fac Jenean volutpat. ligula 
FRO First FAQ Jean aha Neale 
pane Figs iter 
Figure 5. Add or amend content Figure 8. Choosing an existing FAQ to edit 
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pare, we need to initially seed the database with a valid 
username and password the first time login.php is run. 
Once the login table is updated, the call to createnewlogin () 
can be removed. The page control logic branches de- 
pending on the action we want to achieve, and the corre- 
sponding function calls either build an HTML form, query 
the database or add a user to the database. 


Amendcontent.php 

Most of the action takes place within build page 2. In the 
previous version, we could not select any previously en- 
tered content so to add this functionality we have added 
an intermediate step which displays all the content avail- 


FreeBSD, 


Creale new fags content 


Figure 9. Editing a pre-existing FAQ 


FreeBSD. 


Save content 

o Wpcale: Tacs 

o tile: FAQ 6 
heading: Eighth FAQ 
content: Aenean voluipal, ligula vitae laoreet dapenus 
Slatus: 2 


Return io add content 


Figure 10. Saving the FAQ 
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able to be edited. Once the user selects the table record to 
be amended, this is fed back into our original form, which 
is essentially identical whether we are updating or adding 
content. Some “bells and whistles” are added in the form 
of zebra striping of the table rows, and the automatic gen- 
eration of the titles. As the script is referring directly to the 
database, we need a conditional branch at line 266 as the 
menu table has a different schema from the pages, news 
and FAQ content. 


Getting it to work 


Visit the login item via the menu and create a new user and 
password with an auth level of 1. Check the user has been 


Select content menus 


UE O0G ehehus ier 


Create new menus conten 
orp Heenm es 
Bering Pages 


Thea! 


Figure 12. Saving a menu item 
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Useful links 
PHP manual — http://php.net/manual 


added to the login table and remove the 3 lines from the {\ 
start of login.ohp as commented. Revisit login.php, login 
and proceed to edit your content as desired (Figure 3-12). 


Further tuning 

The security is poor — we can have multiple users with 
the same name and password. A better form of encryption 
other than hashing is desirable, and we are missing lots 
of backlinks etc. We should also refactor the code e.g. the 
license and footers. 


In the next part 
We will address these issues and more. 


GEEKED AT BIRTH 
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Primer — Part 10 


In the tenth part of our series on programming, we will improve the 
login process, add more security, and keep spam robots under control. 


What you will learn... 
- How to to configure a development environment and write 


HTML, CSS, PHP and SQL code 


What you should know... 


¢« BSD and general PC administration skills 


n the previous article we put in place a very crude login 
system that allowed anyone to login to our CMS and add 
content. We assume that the user has been correctly au- 
thenticated by comparing their password against a hashed 


password stored in the CMS database, then writing a cookie 
at the client side. It is then a simple matter of checking that 
authorization has been granted prior to carrying out sensitive 
actions (e.g. adding a user or amending content). 


Listing 1. Logout function 


AUMCE MOM NOC eub Ef 


setcookie (KEYNAME, LOGINKEY, time()-3600, “/”); 


echo “You have been logged out”; 


Listing 2. Adding the logout logic 


}elseif (Saction == “appendnewlogin”) { 

DuSseumene —s eEOol{ Username |, 

Spassword = $ POST[“password”]; 

vauth = ) POSt[ auch” ||; 

appendnewlogin(Susername,Spassword,Sauth,$sql); 
}Jelseif (Saction == “logout”) { 

// Logout the user 

logout () > 


}else{ 


/7 Invalid actaon = request login details 


requestlogindetails(); 


Listing 3. /ogoutform 


fFunerLom logoutrorm(){ 


// Check if user is logged in, if so display the logout 
bugvon. 


require once ‘includes/cms.inc’; 
iaexO UL igi’ INC IU IDIS Se 2) Rexciakiow thigtee! 
if (1Sscu (> COOKIE (KEYNAME |) 4 


echo “<div wd=" logout’ >’ ; 
echo ‘<form action="login.php” method="post”>! ; 


echo ‘<input type="submit” value="logout”>’ ; 


echo ‘<input type="hidden” name="action” 
value="logout”>! ; 
echo. “</ forme’ > 


Cehou ny Give. 
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Unfortunately, exposing any login system on the World 
Wide Web leaves us open to undesirable elements. Brute 
force attacks (repeatedly attempting a login using diction- 
ary attacks) and spambots that want to add advertising 
or phishing spam are commonplace, and our basic login 
system needs to defend against this. We also need to add 
logout functionality to every page that requires it. 


The logout functionality 
As the parameters passed to the cookie that is set when 
we are logged in, it makes sense to hold the logout func- 


) FreeBSD, 


« i! ate, oe oe ete 5 1 i ra) 
* fecha © Filter = Gefaute (compl coolirs) © 
—rw Vouen Ce es Bam Sire a f_piers hie fn arity 


Figure 1. Login — no cookie present 


tion as part of the /ogin.php page. We can then detect a 
logout post event to Jogin.php and delete the cookie by 
setting the expire date to a time in the past. Add the follow- 
ing code at the end of /ogin.php (Listing 1). 

Now we need to check for a post event that carries the 
value logout. Add the following elseif branch between ap- 
pend and the closing else (Listing 2). 

We now need a logout form() function that will provide a 
logout button whenever a user is logged in to the system. 
lf we check whether or not the user is logged in we can 
place this in the footer of all pages where login / logout 


Figure 2. Cookie present but no logout button 


Listing 4. Test to see if user is logged in 


PINnCeELOne Menor lhoggedan 
// Check if user is logged in, if not, redirect to 


Log ane Orem 


require once ‘includes/login.inc’; 


if(!isset (5 COOKIE [KEYNAME])){ 


header( “Location: Aiip://"). CMSDOMAIN.”/ login spnp’ ~) 


° 
y 


Listing 5. Set our domain 


7 Oe ecomeatn 


define (“CMSDOMAIN”, ‘192.168.0.118’); 


Listing 6. amendcontent.php 

// Check we are logged in 
ifnotloggedin(); 

// Build the page up to the body tag 


outfile (TEMPLATES . ‘header.inc’); 


Listing 7. phpinfo.php 
<?php 


// Check we are logged in 


require once ‘includes/cms.inc’; 
require NGhUDES tm COMECh Ua Iie =, 
Teo IUNCIMUIBISS 5 ees ahie 
ifnotloggedin(); 

phpinfo(); 


logourtrorm() >? 
Listing 8. amendcontent.php and login.php 


echo BODY; 


Fogourtrornmn() > 


Listing 9. global.css 

#logout { 
nlkeyeNie oe mage lait ee 
DaelkqeelinGd=COLom mrEOmMaEe, 
Padding: 50x; 


border=radiuss 10px; 
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e+e € = |= ee ee ee ee ee ed # 
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Figure 3. Cookie present — logout button visible 


FreeBSD, 


Creebe mw Lage Ganbert 
Tt 
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* 2 4 rly © WTB CE Soiet G08 et Cestan © ua 
@ Gobet = Fiter= Gefauk (oot cocked = 


= pet igs LL? 2 eT Tre ret ai F 


Figure 4. Logout button visible on new faq's page 


Vou hans heen bagged cant 


op VBE CR Serle BOM int Ceokin = # 
Ld Dat aE (Acrrot cookie) © 


The, pogo © ROSE Woe he ESE aor Pacey Liner ome Roms of trig PH 
Liter are, pearls) pe toe: PM Cheval Fen hate oer ed diester i Doe lL 
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Figure 6. Logout button on phpinfo.php 
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Listing 10. validatelogin() 


setcookie (KEYNAME, LOGINKEY, time()+3600, “/”); 


j/7 Display scprEtonis 


Stitile. =  Welkeome.* Susername; 


buildheader (Stitle) ; 
echo wraptag( Al” /Statle)-; 


echo ahref(‘Add or amend content’, ‘/amendcontent. 


php’); 
bung EOoL ai): 


Listing 11. Replacement buildheader(); 


function buaidheader(stitle, Storcelogour = 0) { 


// As cookies need to be set before any output is 
sent to the browser 


// use a function call to build the page header 
// Build the page up to the body tag 

outfile (TEMPLATES ‘header.inc’); 
echo Wraptag ("title >, stitle)-; 
echo HEAD; 

echo BODY; 


logout torm(store=logour)= 


echo- “<div wd="content >” = 


echo ‘<div id="php”>’ ; 


Listing 12. Amended validatelogin(); 


setcookie (KEYNAME, LOGINKEY, time()+3600, “/”); 
// Display options 
Stitle = ‘Welcome * 


Suisetenemes 


buildheader($title,1); 
echo) wraotag( ml” Startle); 
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functionality is required, and the button will be displayed 
only if the user is logged in. Add this to the end of core. 
inc (Listing 3). 

We need to add a function call to check if the user is 
logged in or not, and redirect them to the login page if they 
are not. Add this at the end of core.inc (Listing 4). 

As we cannot guarantee that the user does not spoof 
HTTP headers for the redirect, define our CMS Domain 
in cms.inc. Replace 192.168.0.118 with either the IP ad- 
dress or domain name of your server (if accessible via 
DNS). (Listing 5) 

Add the ifnotloggedin() function call to the beginning 
of amendcontent.php and replace phpinfo.php with the 
content in Listing 7 (Listing 6 & 7). 


Figure 7. The fixed welcome page 


Listing 13. Amended logoutform(); 
“jpaddress’ varchar(64) NOT NULL, 


function logoutform(Sforcelogout = 0) { “page varchar(64) NOT NULL, 
“status int(1) NOT NULL, 
// Check if user is logged in, if so display the ‘timestamp timestamp NOT NULL DEFAULT CURRENT _ 
Logout ur EOn- TIME STAME ON UPDATE CURRENT (IiMESTAMe, 
PRIMARY KEY (*id*) 
CSCS CmcS Vince Micss) login. ine: ) ENGINE=InnoDB AUTO INCREMENT=0 DEFAULT CHARSET=latin1l; 
if (isset ($ COOKIE[KEYNAME]) || $forcelogout == 1) { Listing 17. sqistatements.inc 
<?php 
echo “<div ad=" logout >? ; /* 
k 
Listing 14. Add spambot field to requestlogindetals() in login.php * sqlstatements. inc 
echo ‘Username’ . div(‘<input type="text” * Contains CMS SQL statements 
name="username”>’ ,Sclass); me 
echo ‘Password’ . div(‘<input type="password” a 


name="password”>’ ,Sclass) ; 


echo ‘Email’ . div(‘<input type="text” »sql [0] = “INSERT INTO access { ipaddress ; page , 
name="email”>’,’ loginemail’); “status’, ‘timestamp ~) 
echo ‘<input type="submit” value="Submit”>’ ; VUES. ( =—=P0=ea—t of ea Pama ea aaa 
now());"; 
Listing 15. Remove the comment out from createnewlogin, suffix Ssql[1] = “SELECT status FROM access 
with // to revert to normal login action WHERE ipaddress = ‘---P0---' 
Teese Oo cero |) 4 AND status > 0 
1 SAA ob 


createnewlogin(); 


Add the following line to cms.inc [Listing ] 


// Honeypot for bad traffic 
Listing 16. 
define (“HONEYPOT”, ‘www.google.com’ ); 
CREATE TABLE ‘access ( 
“tg int(!0) unsigned zero! NOT NULL AUTO INCREMENT; 
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Listing 18. mysq/_select() 


Eien IM Sedl Selec seed) | 


Sdo = new mysgli(DBSERVER, DBUSER, DBPASSWORD, 
CMSDB) ; 


sie (USGI COMMS cre Sistine es 3))) || 
die(‘Unable to connect to database [* 


eina)y 


Soll =sclomints ens S1eicte 14 


} 


if ('Sresult = $db->query($sql)) { 
if (DEBUG) { 


die(‘There was an error running the query [ 


a ie 


Sdb->error 
} else { 
die(‘’); 


// Pass our results to an array to be returned 


sig LSSete (SicSysiolllic —> anvil ees )))) 1) 


Sr = array(); 


Sr[] = Sresult->num_ rows; // No of rows returned 
Sx[] = Sdb->field count; // Neovo “columns an 
table 


Sx[] = Sdb->affected rows; // No of rows affected 


e.g. update / delete 
// Append the results to our result count 
Te (oresule—onum tows f= sO) ey 
Sue SI cuciecly isis (Sie Sucesitillic—= sceice lal - 


array (MYSOLI ASSOC)); 
} 


yi Wee seas es a0 


Sresult->free() ; 


}else{ 


Sr = NULL; 


// Close the connection 
Sdb->close(); 
return Sr; 
Listing 19. Additions to core.inc 
function loginsecurity() { 
require INCLUDES ‘sqlstatements.inc’ ; 


1) (Cer elient le addcess 


2 SERVER[“REMOTE ADDR” ] ; 


Sip = 


He (ESS US ROSIE Siieuhle 1 ))) 4} 


// email will always be set, check if it is populated 


if(S POST[“email”] !== ‘’){ 


// Ban ‘em 


banip(sip,. “Login. pap Fr 


}else{ 


// Check that they have not been flagged as 


SUSpLeTous 
Ss = $sql[1]; 
So = stu weplace (saa O=-= je cipy 7 os py 


Side siculic — iuksrepl issictelateeyts (Sis) 7 


if (Sresult) { 


foreach(Sresult as Srow) { 


Sstatus = Srow[0]; 


}else{ 
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ce 


Ss 
Ss 
Ss 
Ss 


ce 


require INCLUDES 


header( ‘Location: http://’ 


require INCLUDES 


Seiceiue S (0)e 


if(Sstatus !== 0){ 


header( ‘Location: http://’ 


fUNGELOn bahip(sip, Space) { 


NEE ice Cie loc ialeteic 


= $sql [0]; 

Se) sonede ple syed eel ae) ta a! 
=eoel wep lates tea aa 
= eslibie Me ajodereS i) aes ae 


mysql select ($s); 


Redirect to our honeypot 


function logip(Spage) { 


// Redirect to our honeypost if status is set 


2 HONEYPOT )) ; 


‘“sqlstatements.inc’ ; 


’ Sip ’ Ss 


p SONGS p SS 6 
pes hy 


y 


fe 


(7 Ouse logue aise 

Sip = $ SERVER[“REMOTE ADDR”]; 
$s = $sql [0]; 
SSeaisteerepliaces( ——- 0—— = 
oS = ste replaces  ——--Pl--— 
SS 2 Stee eile (=== 22==—) 


y 


. HONEYPOT ) ; 


"SCUSLAvemMents .1me: 


Pay 8S) 
PPade ey) o8) 
7. 33.) 


mnnee ll Seleeie (Sis); 4 


Listing 20. Replacement validatelogin() 


function validatelogin(Susername, Spassword, $sql) { 


// Create a session to keep track of our login 


abeenpeEs 

SESE Sieeuee |) | 

// As the password is hashed and hopefully cannot be 
decrypted, 

// We need to send the encrypted password 


Shashed password = hash(‘whirlpool’, $password) ; 


// Fetch credentials from DB, if match create a login 


cookie 

Ss = $sql[0]; 

mis = sicie eects (( oI 4 Suiseiciniemits 5 Sis. jf 

Sis SS Sicie iesjellercis (PS loickslnvetcl joclsisiencel 7 3 


e 


SiSsblbic = inbysiedl weic electors ((sxs))) 6 


if (Sresult) { 


foreach(Sresult as Srow) { 


Sauth = Srow[1]; 


if (Sauth == 1) { 


// og Our sucesstul login 


Fogapo( = logan «pli, 
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// Reset our attempt count in case they login 


again 


Unséei(> (SksslOn | lToginatcenprs 1); 


/) “erecarewanenecookle 


setcookie (KEYNAME, LOGINKEY, time()+3600, “/”); 


/7? Display options 


Stitle = ‘Welcome * . Susername; 


buildheader($title,1); 
echo wraptag(“hl”,Stitie) ; 


echo ahref(‘Add or amend content’, ‘/amendcontent. 


oleae 


bute hooker): 


jelse{ 


// Keep a track of the number of attempts we have 


made at logging in 


LE (sseu (> SESSION | “loginatcemprs |)))1 


9 SESSION[‘loginattempts’] = $ 
SESS TON logiteween pes Ib; 


}else{ 


9 SESSION[‘loginattempts’ ] 


i) 
JA 
“Ne 


// If they have exceeded our limit, ban ‘em 


if($ SESSION[‘loginattempts’] > 3){ 


Sip = $ SERVER[“REMOTE ADDR”]; 


banipicip,. “Login: pio) 


(ib Miew eleperl ia 


requestlogindetails(); 


Listing 21. Modified buildheader() 


// As cookies need to be set before any output is sent 


to the browser 


// use a function call to build the page header 


}/ Check Weare Nou on une ban Wisteand than we are 


HOw als Pell LODO 
loginsecurity(); 
// Build the page up to the body tag 


outfile (TEMPLATES . ‘header.inc’); 


Listing 22. Hide the email address field 
.loginemail { 


visibilviy: bivdden timnportant, 
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Figure 8. The login page with the email “honeytrap” 
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Add the logoutform(); after every occurrence after echo 
BODY; in login.php and amendcontent.php (Listing 8). 

Add the following to global.css to highlight and position 
the logout button (Listing 9). 

With Firebug enabled in Firefox, check that a cookie 
called gp19867fghlls IS created when a user is logged in. 
The logout button should appear on all pages except the 
second time login.php is called and we arrive at the wel- 
come page (Figure 1 — 6). 

Now this is a problem, as we should be able to logout im- 
mediately after we login. Subsequent calls to login.php will 
show the logout button. So what is happening here? The 
problem lies in the validatelogin() function (Listing 10). 

We must set the cookie prior to creating the page header, 
but as the cookie data is generated at the client browser 
side when the page is loaded, as far as the PHP code run- 
ning at the server side is concerned the cookie is not pres- 
ent yet. We can fool buildheader() by passing a parameter 
to force the display of the logout button (Listing 11 — 13). 
This will result in login.php working as desired (Figure 7). 


Spambots and robots 

While we could use the very effective Apache MOD_SECU- 
RITY module to trap bad behaviour, this can be tricky to set 
up. What we will do here is monitor behaviour in two ways. 
First, we will create a hidden field that a normal user will not 
see under normal circumstances, which most spam-robots 
will fill in assuming it is a genuine field. On completing the 
field, our CMS will automatically ban all connections from 
that IP address to login.php permanently. 

We will also check that no more than 3 invalid attempts 
are made to the login.php page, and if that is exceeded, 
that IP address will be banned as well. 

First create another testuser by changing login.php 
as follows and visit login.ohp anew to create anoth- 
er user (e.g. Test, Test, Auth = 1). Don’t worry about 
the error messages — we will fix them later. Once you 
have created the new user, go back and comment out 
createnewlogin(); and check that you can login as the 
test user (Listing 14 and 15). 

If you visit login.php you should be able to login as Test 
(Ignore the Email field), then Logout. (Figure 8). Now cre- 
ate our access table in MySQL to hold our banlist (Listing 
16). Now create the file sqlstatements.inc in our includes 
directory (Listing 17). Replace the mysql select () func- 
tion call in mysql.inc with the following code (Listing 18). 
This fixes a bug where a PHP error is raised when no re- 
sults are returned. Add the following function calls to core. 
inc (Listing 19). Replace validatelogin() in login.php with 
the following code (Listing 20). Modify buildneader() in 
login.php to call 1oginsecurity() (Listing 21). 


www.bsdmag.org 


Useful links 


PHP manual — http://php.net/manual 


Testing 

It is recommended that you run Firebug to view the cook- 
ies and PHP sessions generated during this test. Clear all 
cookies etc. from you browser and visit login.php: 


¢ Login as Test with the correct password. You should 
be able to login. Logout. 

¢ Login as Test with the correct password and an email 
address. You should be redirected to google.com. Any 
visits to login.php will cause a redirect to google.com. 

¢ Use Adminer to clear all the entries from the access table. 

¢ Visit login.php and click on the submit button 3 times 
without making any input. You should be redirected 
on the 4" attempt. 

¢ Use Adminer to clear all the entries from the access table. 

¢ Visit login.ohp and login and logout as normal. Your 
access attempts should be logged correctly with IP 
address and date. 

¢ Login with a mixture of bad username and good 
password, good username and bad password. You 
should be banned on your 4" login attempt. 


CSS modification 

Finally, add the following code to global.css and refresh 
your browser with Ctrl F5 a couple of times to clear the 
cache. The email field should now be invisible to human 
visitors, but available to robots etc. (Listing 22). 


Next steps 

lt might be a good idea to add the banlist functionality to 
all pages on a failed login etc. and keep a tally of what 
pages are accessed etc. legitimately. We also need to add 
the facility to add a user rather than manually editing code 
each time. Our CMS is getting quite large, with over 2,100 
lines of code (excluding the Jquery libraries) so we will 
look at refactoring some of this code in the next article. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his early 
teens. A keen advocate of open systems since the mid-eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
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port, system administrator, developer, systems integrator and IT man- 
ager. He has moved on from CP/M and nixie tubes but keeps a solder- 
ing iron handy just in case. 
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FreeBSD Programming 
Primer —- Part 11 


In the penultimate part of our series on programming, we 
will look at using the Netbeans Integrated Development 
Environment to debug and edit our CMS. 


What you will learn... 
- How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


at the moment so this how-to is going to be very 

short. My local telco is currently rolling out fibre in 
the area, and my ADSL internet connection is very unreli- 
able, but hopefully | will be able to wrap up the program- 
ming primer in part 12 with a bumper edition. 

While debugging at the command line using echo state- 
ments or commenting out code is possible, a more fre- 
quent scenario is that our project will be residing on a re- 
mote server and we will need to see the actual processes 
in action. Often developers will have a local copy of the 
LAMP stack on their PC or laptop, so that they can de- 
bug locally. However, what happens when our develop- 
ment environment is on a laptop and the code is on a re- 
mote server? A frequent approach is to use an Integrated 
Development Environment (IDE) with a built in file trans- 
fer utility. Coupled with Xdebug, which supports PHP, we 
can download our remote code and debug (step through) 
each line, examine variables etc. To do this, we will need 
to install Xdebug on our server and install the IDE of our 
choice on an available local PC. This can be FreeBSD, 
Windows or Linux, but in my case | was using an Ubuntu 
desktop. The IDE installation will vary from environment to 
environment, full details can be found at hittps://netbeans. 
org. The IP address of of my desktop PC for this exercise 
was 192.168.0.123. 


| nfortunately, the Internet gremlins have got me 


Installing Xdebug 

Rather than using the FreeBSD provided software, | 
downloaded the latest version from hittp://xdebug.org. 
The reason for this is that in the past | have had prob- 
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lems getting the standard packaged version of Xdebug 
working with certain distro’s, where as the latest Xdebug 


Listing 1. /nstall Xdebug 


tar =xXvabr xdebug—Z2.7 273.207 
ed xdebug-2Z a7. 5 
phpize 


./configure -enable-xdebug 


make 


cd modules 


cp xdebug.so /usr/local/lib/php/20100525/ 
touch /var/log/xdebug.log 
chmod 666 /var/log/xdebug.log 


touch /user/local/etc/php/xdebug.ini 


Listing 2. /user/local/etc/php/xdebug. ini 

zend extension=/usr/local/lib/php/20100525/xdebug.so 
OLSIOIIC). Ieee Sigel S— Il 

ROShug weenetevaost— V7.2 los 0e boy 

Reb seine te ort 000 

cdebudprenore ander = dogp,’ 

xdebug. Hemoue mode-reg 

xcebug.pmoihker jenao le == wl 

xdebug.remote log=/var/log/xdebug.log 


Listing 3. Restarting Apache 


/usr/local/etc/rce.d/apache22 stop 
/usr/local/ete/re.d/apache22 “start 
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and latest Netbeans IDE always seem to work OK togeth- 
er. Once you have downloaded the latest version of the 
tarball (Currently xdebug-2.2.3.tgz) into your home direc- 
tory, on the remote server (192.168.0.118) as root, per- 
form the following (Listing 1). 

Add the following to /user/local/etc/php/xdebug.ini 
(Listing 2). 

Replace 192.168.0.123 with the IP address of your cli- 
ent machine. 

Restart Apache (Listing 3). 

lf we now login as admin and visit our PHPinfo page at 
http:/192.168.0.118/ohpinfo.php, we should see that Xde- 


ei |e frevhoorts 


©» VO2. 168.0. 1 1B, 


Ohasid Preface 


q 


(Gabegerian: Projecte: 
 MTMLs ie Pe Apalic ation 
r= Bi | Oe Per agelicathen with beiting Seurcai , 
a a a 
Sasodpthoni 


Delo ade an dodetieg PHP 6 ape lcetion. crested # Meardard WME enejeck Fer it nd 
60S Up Cha Bree ce pregartiaa eeordingly. Gach prelace can be aaallye run mee 
detupyed. 


Figure 2. Create a new project with PHP application on remote server 
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bug is installed and running (Figure 1). If you have not al- 
ready done so, download and install Netbeans on a local PC 
of your choice. You will need a working Java installation and 
Firefox installed for this to work. 


fo NetBeans ie 


My ie --==™ — , 
Mow PUP Abe Ree Pra eee See 


Stapa 
TL 4, Cheha Preece 
2. Mame and Lecetion 
3, Renan Caan erice 
4 Condingaclen 


Brajece porary Pree oad 


Geurces Feder 


| home /quecofer/ Met BenmPra|ecte/Pre eS cH = 


ipoeca... 


eer weernlen: FHP Gb 
Pre brea ee 6 alg Pee 
Dake needing: = LTR 


~) Put Maciaans metedete inte apeparete drachory 


«ance 


th Sepa) Eble 


Figure 3. Give the projectaname 
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Figure 4. Create a new remote connection by clicking on Manage 


3 Nel Beans |pe 


NM ¥ Arte == uz 
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Figure 5. Create a new SFTP connection (SSH must be running on Port 
22 of your server) 
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. e 2. Mii aid Locatice 
e z i i The Felloning (lew will bon demadended after you clkck Mink, 
Xdebug http //xdebug org : mt —— The download ats Paaicik a untill ‘adbex wbertmat 
- Netbeans: http://php.net/manual gh pies 
Recor * BD scampi 
+ 2S inegas 
BS aches 
SS jvwsvcrigh 
& sell 
on 
aE a 
fa Wel Beans 10E go “ae 
= ‘Bo ramp leas 
Tl apna eee 
My Arte aan 7 lac php 
2 hieree at 
=T Desde pokes 
Recent) ae pieteregie 
Hear same 12 Fomr it 
Punigeetk: Lies Asae ‘hana dew deta . 
iene ceened eonie ta ba eeeeen Oat Quer Pore | “a5 Cheek 2 
for apecity Prdvuce bay Me) iy tory secesahaly @ 2 flea for more} calacted Gi pelected Alla mill be dewlsaced acclicing files fll be overemicten, 
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Figure 9. Download the source tree — disable Adminer and sqlbuddy 
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a c=) Figure 10. Load Index.php click on line 52 and start the debug session 


by pressing Ctrl F5 
Figure 7. A successful connection 


Now follow the Figures (Figure 2 — 10). If all goes to 
plan, you should be able to step through your code by 
pressing F/, and interrogate variables by hovering over 


 NelBeans ve 


pac p Ua wap Lhe pore te Flat wil bed phoned, 


E Ne endLocee  Cretcrlensetdngrembeelde snd idea hha reject repute eg bx. them e.g. srequest. While debugging, the breakpoint line 
se perms imesen | should change colour from pink to green. If it does not, 
Peet waa =| pinta there is some mis-communication between Netbeans and 
ss eae ras tas the server. See xdebug.log for further details. 
ROB SOMERVILLE 
Rob Somerville has been passionate about technology since his early teens. 
A keen advocate of open systems since the mid-eighties, he has worked in 
«peck (BEB ith cence! al many corporate sectors including finance, automotive, airlines, government 
and media in a variety of roles from technical support, system administrator, 
Figure 8. The final settings of the remote project. Replace with your developer, systems integrator and IT manager. He has moved on from CP/M 
server IP address as required and nixie tubes but keeps a soldering iron handy just in case. 
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FreeBSD Programming 


Primer — Part 12 


In the final part of our series on programming, we wrap up 
using the Netbeans Integrated Development Environment 


to debug and edit our CMS. 


What you will learn... 
- How to to configure a development environment and write 
HTML, CSS, PHP and SQL code 


ny programmer or developer will freely admit that 
A his or her code is never finished. The best we can 
hope for is a piece of code that is bug free, reliable 
and extensible — i.e. we can accommodate future chang- 
es easily. Sadly, this is the last part of the our program- 
ming primer series, and while we have a lot of code (over 
3,200 lines excluding external libraries) a lot of further de- 
velopment is required to bring our fledgling CMS up to 
scratch. While | could carry on and take the project to the 
point where it is a fully functional CMS, | would not be able 
personally to support the code and testing cycle in the 
long term, so it it is now time for me to hand this embryon- 
IC project over to the community to add the final touches — 
and squash any inevitable bugs and areas of inefficiency 
that | have inadvertently included. Rather than me catch- 
ing the fish, it is now time for you to cast your rod into the 
deep pool where many fish — (including sharks) — dwell. 
In reality, the lesson of Part 12 of the series is probably 
the hardest in the series — wrapping your head around 


Listing 1. /user/local/etc/php/xdebug.ini 


zend extension=/usr/local/lib/php/20100525/xdebug.so 
ole loible| a igci@ine Siovello lol 

GOlSIOUICG/ - ielewiCne se ING Sic Ian Mote) WS ilo 
Kdebug-Gemote port 000 

xCebuc. Femoue Nandler="decqp” 

xdebug. remote mode—req 

xdebug.e cetllen senable — 

xdebug.remote log=/var/log/xdebug. log 
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Figure 1. Xdebug session initiated in browser 


JiRe Lo Wew Binet Source efater But Deby Tews Toca Wiow tie 
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Figure 2. Breakpoint set and Netbeans communicating with remote 
server 
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Figure 3. Stepping into CMS.INC 
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Figure 4. Setting a watch expression 


jibe Lok Wew Gimeipeie Gourue Refictor Burt Dintas Tews Dein wise Mi 
oe sala ie: ib-h- Deh @ Dene 


&@ - - ares. FAS oD £6 wa @ 


Figure 5. Viewing variables currently set 
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someone else’s code and fixing or developing it. As a de- 
veloper, this has always been the biggest struggle | have 
had when faced with maintaining legacy code. It is very 
easy to “code from scratch” but the demons always lie 
further down the road. Hopefully, though you will have a 
head start so that life is a bit easier. 


Netbeans and Xdebug 

We covered setting up both of these in Part 11. Ensure 
your xdebug.ini is configured correctly and restart Apache 
if required /user/local/etc/php/xdebug. ini (Listing 1). 


Starting a debugging session 

To initiate a real time debugging session, open the FreeB- 
SD CMS project and navigate to line 12 of index.php. Click 
on the LHS margin next to line 12 to set the breakpoint 
(which should turn a salmon pink color), and press Ctrl F5 
to initiate a debug session. This should open your default 
browser (in my case Firefox) at the index.php file on the 
remote server with the parameter XDEBUG_ SESSION _ 
START passed to xdebug. This will cause the browser to 
report “Connecting ...” but no HTML will be parsed as Net- 
beans is now in control of the program flow. Switch back 
to Netbeans, and line 12 should be highlighted green — 
which means we are in debug mode and communicating 
with the remote server (Figure 1 & 2). 

Pressing F7 will walk you through each line of code, and 
Netbeans will automatically open the first file CMS.INC for 
you (Figure 3). Continue to press F7 until you come to line 
41 of index.php. 


Adding a watch 

A watch in debugger terms allows you to grab a variable 
and monitor its value in real time as you step through the 
code. Highlight $ seRvER[ ‘REQUEST URI’ ], right click and Add 
Watch. A dialogue box will appear, click OK and the value of 
this variable will be shown in the lower pane (Figure 4 & 5). 


The Call Stack and Breakpoints 

The Call stack shows us the code from each of the files 
that are open. For instance, the function buildpage() IS 
contained in core.inc. When we reach that point of execu- 
tion in the code, both index.php and core.inc will be shown 
in the call stack. Likewise, all breakpoints are shown in the 
lower pane (Figure 6 & 7). 


Watches and balloon evaluation 

lf we hover over a variable on the left or right hand side of 
a statement, we can determine its value. If the value is not 
shown, ensure this is enabled in the PHP configuration 
settings (Figure 8 — 10). 
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Figure 6. Viewing the call stack 
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Figure 7. Viewing breakpoints that are set 
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Figure 8. Real-time balloon watch 
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Figure 9. Viewing the SURI variable 
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Figure 11. Setting an additional breakpoint 
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Figure 12. Note the Connecting delay as we step through the code 
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Figure 13. Breakpoints will be jumped over if code is not executed 
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Figure 14. Stepping into the parse_request function 
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Figure 15. Contents of the Sarray variable 
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Figure 16. Content of the Sarray variable after first element is deleted 
in code 
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Figure 17. Sparamcount 
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Program flow 

Set a breakpoint at line 46 of index.php. Navigate to ../ 
page/1 in your browser and step through the code using 
F/. Note that your breakpoint will be ignored as we are not 
making a request to the home page of the server. Also, the 
value of $array will change as we step through the code 
(Figure 13 — 18). Pressing F5 in Netbeans will allow us to 
continue until the page is loaded. To prevent Netbeans 
from stopping at the first line of your code (even if a break- 
point is not set) disable this in the settings (Figure 21). 
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Figure 18. Once debugger has completed, page is displayed 
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Figure 19. Saving code remotely 
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Figure 21. Disabling debugger stopping at the first line 


Figure 22. Adding new page content 
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| ca 
Figure 23. We have a bug! 


Editing and uploading code 

Edit line 60 of index.php and comment out the echo state- 
ment. When the file is saved, it should be uploaded to the 
remote server for you (Figure 19 — 20). 


Our first challenge 

With the debugger running, log in to the CMS and add 
some content (Figure 22 — 23). Why is the content not be- 
ing saved? The answer is at the bottom of the article. 


The code 

The full code for this project is available at https:/github. 
com/merville/FreeBSD_CMS complete with the database 
backup which is stored in DUMP.sql. Please note that you 


Useful links 
¢ Xdebug: http://xdebug.org 
« Netbeans: http:/php.net/manual 


will have to modify cms.inc to meet your own environ- 
ment. Please note that in its current form this project is 
not suitable for production use. 


So what next? 

There are many additional functions our CMS could use, 

help for user adding content, filtering to check that HTML en- 

tered is valid, a facility for uploading photos, additional mod- 

ules for chat, XML feeds, you name it — the sky is the limit. 
The next Howto series will cover image manipulation 

with the Gimp. 


Solution 

Line 365 of amendcontent.php only displays the changes, 
they are not committed to the database. For example of 
this, see the logip() function. 
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